CSS-patronen maken met herhalende kleurverlopen

CSS-patronen zijn herhalende achtergronden, zoals strepen, rasters, stippen en ruiten, die je volledig met gradientfuncties tekent. Twee ideeën laten ze werken. Harde kleurstops, waarbij twee stops op dezelfde plek staan, maken van een gradient een scherpe rand. Herhaling, met de repeating-*-functies of met tegels via background-size, maakt van die ene rand een patroon. Het resultaat weegt een paar bytes, schaalt perfect en pakt zijn kleuren uit je CSS-variabelen.

Hoe harde stops vormen maken

Een gradient loopt over tussen naburige stops. Begint de volgende stop precies waar de vorige eindigde, dan is er geen afstand om overheen te lopen en wisselt de kleur in een harde lijn. De verkorte schrijfwijze is een kleur met twee posities, zoals #1e293b 0 10px, die die kleur egaal houdt van 0 tot 10 pixels. De gids over de CSS linear gradient behandelt stops, hints en harde stops uitgebreid.

/* 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);

Strepen met repeating-linear-gradient

repeating-linear-gradient() herhaalt zijn stoplijst langs de gradientlijn tot het element vol is. De lengte van één herhaling is de positie van de laatste stop, dus 0 10px, 10px 20px herhaalt elke 20 pixels. Verander de hoek voor diagonalen, en de verhouding tussen de twee banden voor krijtstrepen of brede luifelstrepen.

Rasters, stippen en tegels met background-size

Sommige patronen kun je niet met één herhalende gradient tekenen: een stippenraster herhaalt in twee richtingen. De oplossing is één tegel te tekenen, zoals één stip of één hoek van een raster, en background-size op de tegelgrootte te zetten. Achtergronden herhalen standaard, dus de tegel vult het element.

.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;
}

Het raster bestaat uit twee gradients: de ene tekent een horizontale lijn van 1px bovenaan elke tegel, de andere een verticale lijn aan de linkerrand. De stippen zijn een kleine radiale gradient die na 2 pixels transparant wordt. Het dambord gebruikt een conic gradient in kwarten, en heeft daarom maar één laag nodig.

Gingham, ruiten en zigzag

Halfdoorzichtige strepen over elkaar leggen geeft geweven patronen: waar een horizontale en een verticale band kruisen, stapelen hun kleuren en wordt het vierkant donkerder. Dat is gingham. Voeg een tweede, dunnere set strepen in een andere kleur toe en het wordt een ruit. Zigzags komen van vier driehoekige hoeken, elk getekend met een harde stop op 25% onder een andere hoek.

.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;
}

Bewegende strepen voor voortgangsbalken

Geanimeerde diagonale strepen zijn de klassieke manier om te laten zien dat er nog iets gebeurt. Teken de strepen als tegel met background-size en verschuif background-position met precies één tegelbreedte. Omdat het eindbeeld gelijk is aan het beginbeeld, heeft de lus geen zichtbare sprong. Houd het bij kleine elementen en zet het uit voor mensen die liever minder beweging willen.

.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; }
}

Patronen schalen en thematiseren

Schrijf stopposities en tegelgroottes in pixels of em, niet in percentages. Percentages hangen af van de grootte van het element, dus strepen rekken ongelijk uit als het element van formaat verandert en randen kunnen tussen pixels vallen en vervagen. Met em schaalt een patroon mee met de tekst eromheen, wat past bij badges en labels met een patroon.

Met custom properties zijn patronen herbruikbaar. Definieer de kleuren en de grootte één keer en varieer ze per component of per thema, bijvoorbeeld een lichter patroon in de lichte modus en een rustiger patroon in de donkere modus.

.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;
}

Patronen achter tekst

Patronen zijn een soort textuur en dezelfde regels gelden: subtiel genoeg om te voelen in plaats van te lezen. Achtergrondtextuur behandelt korrel, papier en stof; tekst op drukke achtergronden laat zien hoe woorden er leesbaar bovenop blijven.