# CSS-mønstre med gjentakende gradienter

[Canonical HTML page](https://gradiently.design/nb/guide/css-patterns)

Harde fargestopp gjør gradienter til former, og background-size gjør formene til fliser. Med disse to grepene kan du tegne de fleste klassiske mønstre med noen få kodelinjer, uten bildefiler.

## The short version

- CSS-mønstre tegnes med gradienter som bruker harde fargestopp, slik at fargene skifter brått i stedet for å gli over i hverandre.
- Funksjonene repeating-linear-gradient, repeating-radial-gradient og repeating-conic-gradient gjentar stoppene til elementet er fylt, og tegner striper, ringer og stråler.
- background-size gjør én gradient til en flis, som brukes til å bygge prikkemønstre, linjerutenett, sjakkmønstre og vevde ruter.
- Stopposisjoner i piksler holder stripene skarpe og jevne, mens prosenter kan gi ujevne, uklare kanter.
- Mønstre bak tekst bør ha lav kontrast, slik at ordene er lette å lese.

**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.

- Diagonale striper: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Nålestriper: `repeating-linear-gradient(90deg, #0f172a 0 23px, #475569 23px 24px)`
- Ringer: `repeating-radial-gradient(circle at 50% 50%, #fef3c7 0 8px, #fcd34d 8px 16px)`
- Stråler: `repeating-conic-gradient(#0f766e 0 15deg, #115e59 15deg 30deg)`
- Dropsstriper: `repeating-linear-gradient(-45deg, #fdf2f8 0 14px, #f9a8d4 14px 18px)`
- Linjert papir: `repeating-linear-gradient(0deg, #eff6ff 0 27px, #bfdbfe 27px 28px)`

Seks mønstre, hvert laget av én gjentakende gradient. Kopier dem rett inn i `background`.

## 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](https://gradiently.design/nb/guide/css-linear-gradient) forklarer stopp, hint og harde stopp i detalj.

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

Fra blanding til kant til mønster, i tre trinn.

## 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.

| Mønster | Stopp | Effekt |
| --- | --- | --- |
| Jevne striper | `A 0 10px, B 10px 20px` | Like bånd, gjentas hver 20px |
| Nålestriper | `A 0 23px, B 23px 24px` | En linje på 1px hver 24px |
| Markise | `A 0 40px, B 40px 80px` ved `90deg` | Brede loddrette bånd |
| Dobbel linje | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | To tynne linjer tett sammen |

Oppskrifter på striper. A og B er de to fargene dine; det siste stoppet bestemmer lengden på gjentakelsen.

> **Skarpe diagonaler** Harde kanter på skrå kan se hakkete ut. En halv piksel mellom stoppene, som i `#1e293b 0 10px, #334155 10.5px 20px`, gir hver kant litt kantutjevning og et jevnere uttrykk.

## 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.

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

Et tegningsrutenett, et prikkemønster og et sjakkmønster. Hvert er én flis som gjentas med `background-size`.

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](https://gradiently.design/nb/guide/css-conic-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.

```css
.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øde vevde ruter og himmelblå sikksakk. I sikksakkmønsteret er de to første lagene forskjøvet en halv flis, slik at trekantene griper inn i hverandre.

## 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](https://gradiently.design/nb/guide/reduced-motion).

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

Striper som beveger seg langs en fremdriftslinje. Bevegelsen er like lang som flisens bredde, så løkken er sømløs.

## 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](https://gradiently.design/nb/guide/dark-mode-design).

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

Ett mønster, med tema styrt av tre variabler.

## Mønstre bak tekst

### Unngå

- Striper med høy kontrast rett bak brødtekst
- Fine mønstre som flimrer når siden rulles
- Mønstre i samme farge som teksten
- Flere ulike mønstre på én skjerm

### Gjør dette

- Mønstre med lav kontrast og to nærliggende nyanser av én farge
- Større, roligere fliser på store flater
- Et ensfarget felt under tekst på et urolig mønster
- Ett mønster som en gjenkjennelig aksent

Mønstre er en type tekstur, og de samme reglene gjelder: diskrete nok til å føles mer enn å leses. [Bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture) tar for seg korn, papir og stoff; [tekst på urolige bakgrunner](https://gradiently.design/nb/guide/type-on-busy-backgrounds) forklarer hvordan du holder ordene leselige oppå dem.

## FAQ

### Hvordan lager jeg striper i CSS?

Bruk `repeating-linear-gradient()` med harde stopp, for eksempel `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Endre vinkelen for å styre retningen og lengdene for å styre bredden.

### Hvordan lager jeg et prikkemønster i CSS?

Tegn én prikk med `radial-gradient(#ca8a04 1.5px, transparent 2px)` og gjenta den med `background-size: 20px 20px`.

### Hvordan lager jeg et sjakkmønster i CSS?

Bruk `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` med en `background-size` som `24px 24px`. Hver flis inneholder fire ruter.

### Hvorfor er CSS-stripene mine uklare eller ujevne?

Prosentposisjoner kan havne mellom piksler. Bruk lengder i piksler eller em for stopp og flisstørrelser, og la det være en halv piksel mellom stoppene på diagonale kanter.

### Er CSS-gradientmønstre bedre enn bildemønstre?

For geometriske mønstre er svaret som regel ja: de trenger ingen nedlasting, holder seg skarpe i alle størrelser og kan få nye farger med CSS-variabler. Organiske eller fotografiske teksturer trenger fortsatt bilder.