CSS-mønstre med gjentakende gradienter

CSS-mønstre er gjentakende bakgrunner, som striper, rutenett, prikker og ruter, tegnet utelukkende med gradientfunksjoner. To grep får dem til å fungere. Harde fargestopp, der to stopp har samme posisjon, gjør en gradient til en skarp kant. Gjentakelse, enten med gradientfunksjonene repeating-* eller flislegging med background-size, gjør én kant til et mønster. Resultatet veier noen få byte, skalerer perfekt og henter fargene fra CSS-variablene dine.

Slik lager harde stopp former

En gradient blander fargene mellom nabostopp. Hvis neste stopp begynner akkurat der det forrige sluttet, finnes det ingen avstand å blande over, så fargen skifter langs en skarp linje. Kortformen er én farge med to posisjoner, som #1e293b 0 10px, som holder fargen ensartet fra 0 til 10 piksler. Guiden til lineære CSS-gradienter forklarer stopp, hint og harde 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);

Striper med repeating-linear-gradient

repeating-linear-gradient() gjentar stopplisten langs gradientlinjen til elementet er fylt. Lengden på én gjentakelse er posisjonen til det siste stoppet, så 0 10px, 10px 20px gjentas hver 20. piksel. Endre vinkelen for diagonaler, og forholdet mellom de to båndene for nålestriper eller brede markisestriper.

Rutenett, prikker og fliser med background-size

Noen mønstre kan ikke tegnes med én gjentakende gradient: et prikkemønster trenger gjentakelse i to retninger. Løsningen er å tegne én flis, for eksempel én prikk eller ett hjørne av et rutenett, og sette background-size til flisens størrelse. Bakgrunner gjentas som standard, så flisen 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;
}

Rutenettet består av to gradienter: én tegner en vannrett linje på 1px øverst i hver flis, den andre en loddrett linje langs venstre kant. Prikkene er en liten radiell gradient som blir gjennomsiktig etter 2 piksler. Sjakkmønsteret bruker en konisk gradient delt i firedeler, og trenger derfor bare ett lag.

Vevde ruter, skotskruter og sikksakk

Halvgjennomsiktige striper i lag lager vevde mønstre: der et vannrett og et loddrett bånd krysser hverandre, legges fargene oppå hverandre og ruten blir mørkere. Slik får du vevde ruter. Legg til et nytt sett med tynnere striper i en annen farge, så får du skotskruter. Sikksakk kommer fra fire trekantede hjørner, hvert tegnet med et hardt stopp ved 25% i en ulik 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;
}

Bevegelige striper i fremdriftslinjer

Animerte diagonale striper er en klassisk måte å vise at noe fortsatt arbeider på. Tegn stripene som en flis med background-size, og flytt deretter background-position nøyaktig én flisbredde. Fordi siste bilde samsvarer med første, har løkken ingen synlig overgang. Bruk dette på små elementer, og stopp det for dem som foretrekker redusert bevegelse.

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

Størrelse, tema og skalering av mønstre

Skriv stopposisjoner og flisstørrelser i piksler eller em, ikke prosenter. Prosenter avhenger av elementets størrelse, så stripene strekkes ujevnt når elementet endrer størrelse, og kanter kan havne mellom piksler og bli uklare. Med em skaleres mønsteret med teksten rundt, noe som passer til mønstrede merker og etiketter.

Egendefinerte CSS-egenskaper gjør mønstrene gjenbrukbare. Definer fargene og størrelsen én gang, og varier dem per komponent eller tema, for eksempel et lysere mønster i lys modus og et roligere i mørk 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;
}

Mønstre bak tekst

Mønstre er en type tekstur, og de samme reglene gjelder: diskrete nok til å føles mer enn å leses. Bakgrunnstekstur tar for seg korn, papir og stoff; tekst på urolige bakgrunner forklarer hvordan du holder ordene leselige oppå dem.