CSS-mönster med repeterande gradienter

CSS-mönster är upprepade bakgrunder, som ränder, rutnät, prickar och rutor, ritade helt med gradientfunktioner. Två idéer får dem att fungera. Hårda färgstopp, där två stopp delar position, gör en gradient till en skarp kant. Upprepning, antingen med funktionerna repeating-* eller med plattor via background-size, gör en kant till ett mönster. Resultatet väger några få byte, skalar perfekt och hämtar sina färger från dina CSS-variabler.

Så gör hårda stopp former

En gradient blandar mellan angränsande stopp. Om nästa stopp börjar precis där det förra slutade finns inget avstånd att blanda över, så färgen byter i en hård linje. Genvägen är en färg med två positioner, som #1e293b 0 10px, vilket håller färgen solid från 0 till 10 pixlar. Guiden om CSS linear-gradient går igenom stopp, hints och hårda stopp i detalj.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Ränder med repeating-linear-gradient

repeating-linear-gradient() upprepar sin stopplista längs gradientlinjen tills elementet är fullt. Längden på en upprepning är det sista stoppets position, så 0 10px, 10px 20px upprepas var 20:e pixel. Ändra vinkeln för diagonaler och förhållandet mellan de två banden för nålränder eller kraftiga markisränder.

Rutnät, prickar och plattor med background-size

Vissa mönster går inte att rita med en enda repeterande gradient: ett prickrutnät behöver upprepning i två riktningar. Lösningen är att rita en platta, till exempel en prick eller ett hörn av ett rutnät, och sedan sätta background-size till plattans storlek. Bakgrunder upprepas som standard, så plattan fyller elementet.

.grid-lines {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

Rutnätet består av två gradienter: den ena ritar en 1 px lång vågrät linje högst upp i varje platta, den andra en lodrät linje längs vänsterkanten. Prickarna är en liten radiell gradient som blir genomskinlig efter 2 pixlar. Schackrutan använder en konisk gradient delad i kvartar, vilket är varför den bara behöver ett lager.

Gingham, tartan och sicksack

Genom att lägga halvtransparenta ränder över varandra får du vävda mönster: där ett vågrätt och ett lodrätt band korsas läggs färgerna på varandra och rutan blir mörkare. Det är gingham. Lägg till en andra, tunnare uppsättning ränder i en annan färg så blir det tartan. Sicksack kommer från fyra triangelformade hörn, vart och ett ritat med ett hårt stopp vid 25 % i olika vinkel.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Rörliga ränder för förloppsindikatorer

Animerade diagonala ränder är det klassiska sättet att visa att något fortfarande pågår. Rita ränderna som en platta med background-size och flytta sedan background-position exakt en plattbredd. Eftersom slutbilden är lika med startbilden syns inget hopp i loopen. Håll det till små element och stäng av det för den som föredrar minskad rörelse.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}

Storlek, teman och skalning av mönster

Skriv stoppositioner och plattstorlekar i pixlar eller em, inte i procent. Procent beror på elementets storlek, så ränderna sträcks ojämnt när elementet ändrar storlek och kanterna kan hamna mellan pixlar och bli suddiga. Med em skalar mönstret med texten runt omkring, vilket passar mönstrade märken och etiketter.

Anpassade egenskaper gör mönster återanvändbara. Definiera färgerna och storleken en gång och variera dem sedan per komponent eller tema, till exempel ett ljusare mönster i ljust läge och ett lugnare i mörkt läge.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Mönster bakom text

Mönster är en sorts textur, och samma regler gäller: diskreta nog att kännas snarare än läsas. Bakgrundstextur tar upp korn, papper och tyg, och text på stökiga bakgrunder handlar om att hålla orden läsbara ovanpå.