# CSS-mønstre med gentagende gradienter

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

Hårde farvestop gør gradienter til former, og background-size gør former til fliser. Med de to idéer kan du tegne de fleste klassiske mønstre på få linjer uden billedfiler.

## The short version

- CSS-mønstre tegnes med gradienter med hårde farvestop, så farverne skifter øjeblikkeligt i stedet for at blande sig.
- Funktionerne repeating-linear-gradient, repeating-radial-gradient og repeating-conic-gradient gentager deres stop, så de fylder elementet, og tegner striber, ringe og stråler.
- background-size gør en enkelt gradient til en flise, og sådan bygges prikgitre, liniegitre, skakternede mønstre og gingham.
- Stoppositioner skrevet i pixel holder striber skarpe og jævne, mens procenter kan give ujævne, slørede kanter.
- Mønstre bag tekst bør holde sig lave i kontrast, så ordene forbliver lette at læse.

**CSS-mønstre** er gentagende baggrunde, som striber, gitre, prikker og tern, tegnet udelukkende med gradientfunktioner. To idéer får dem til at virke. Hårde farvestop, hvor to stop deler en position, gør en gradient til en skarp kant. Gentagelse, enten med `repeating-*`-gradientfunktionerne eller med `background-size`-fliser, gør én kant til et mønster. Resultatet vejer nogle få bytes, skalerer perfekt og henter sine farver fra dine CSS-variabler.

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

Seks mønstre, hvert en enkelt gentagende gradient. Kopiér hvilket som helst direkte ind i `background`.

## Sådan former hårde stop former

En gradient blander mellem nabostop. Starter det næste stop præcis, hvor det sidste sluttede, er der ingen afstand at blande over, så farven skifter i en hård linje. Genvejen til det er en farve med to positioner, som `#1e293b 0 10px`, som holder den farve massiv fra 0 til 10 pixel. Guiden om [CSS lineær gradient](https://gradiently.design/da/guide/css-linear-gradient) dækker stop, hints og hårde stop i detaljer.

```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 trin.

## Striber med repeating-linear-gradient

`repeating-linear-gradient()` gentager sin stopliste langs gradientlinjen, til elementet er fyldt. Længden af én gentagelse er det sidste stops position, så `0 10px, 10px 20px` gentager hver 20. pixel. Skift vinklen til diagonaler, og skift forholdet mellem de to bånd til nålestriber eller kraftige markisestriber.

| Mønster | Stop | Effekt |
| --- | --- | --- |
| Jævne striber | `A 0 10px, B 10px 20px` | Lige store bånd, gentagelse på 20 px |
| Nålestribe | `A 0 23px, B 23px 24px` | En linje på 1 px hver 24. px |
| Markise | `A 0 40px, B 40px 80px` ved `90deg` | Brede lodrette bånd |
| Dobbeltlinje | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | To tynde linjer tæt på hinanden |

Striber som opskrifter. A og B er dine to farver, og det sidste stop sætter gentagelseslængden.

> **Skarpe diagonaler** Hårde kanter i vinkler kan se takkede ud. Lader du en halv pixel ligge mellem stoppene, som i `#1e293b 0 10px, #334155 10.5px 20px`, får hver kant et hår af udjævning og læses som blødere.

## Gitre, prikker og fliser med background-size

Nogle mønstre kan ikke tegnes med én gentagende gradient: et prikgitter kræver gentagelse i to retninger. Løsningen er at tegne én flise, som én prik eller ét hjørne af et gitter, og derefter sætte `background-size` til flisestørrelsen. Baggrunde gentages som standard, så fliserne fylder 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 blueprint-gitter, et prikgitter og et skakternet mønster. Hver er én flise, gentaget af `background-size`.

Gitteret er to gradienter: én tegner en vandret linje på 1 px øverst i hver flise, den anden en lodret linje ved dens venstre kant. Prikkerne er en lille radial gradient, der bliver gennemsigtig efter 2 pixel. Det skakternede mønster bruger en [konisk gradient](https://gradiently.design/da/guide/css-conic-gradient) delt i kvarte, og derfor kræver det kun ét lag.

## Gingham, tern og zigzag

Semigennemsigtige striber i lag laver vævede mønstre: hvor et vandret og et lodret bånd krydser hinanden, stables deres farver, og kvadratet bliver mørkere. Det er gingham. Tilføj et andet, tyndere sæt striber i en anden farve, og det bliver til tern. Zigzag kommer af fire trekantede hjørner, hver tegnet med et hårdt stop ved 25 % i en forskellig 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ød gingham og en himmelblå zigzag. I zigzaggen er de to første lag flyttet en halv flise, så trekanterne griber ind i hinanden.

## Bevægelige striber til statuslinjer

Animerede diagonale striber er den klassiske måde at vise, at noget stadig arbejder. Tegn stribene som en flise med `background-size`, og flyt derefter `background-position` med præcis én flisebredde. Fordi slutframen matcher startframen, har løkken intet synligt spring. Hold det til små elementer, og stop det for folk, der foretrækker [reduceret bevægelse](https://gradiently.design/da/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; }
}
```

Striber, der kravler langs en statuslinje. Animationsafstanden svarer til flisebredden, så løkken er sømløs.

## Størrelse, temaer og skalering af mønstre

Skriv stoppositioner og flisestørrelser i pixel eller `em`, ikke i procent. Procenter afhænger af elementets størrelse, så striber strækkes ujævnt, når elementet ændrer størrelse, og kanter kan lande mellem pixler og blive slørede. Med `em` skalerer et mønster med teksten omkring det, hvilket passer til mønstrede badges og labels.

Brugerdefinerede egenskaber gør mønstre genbrugelige. Definér farverne og størrelsen én gang, og variér dem derefter pr. komponent eller pr. tema, for eksempel et lysere mønster i lys tilstand og et mere dæmpet i [mørk tilstand](https://gradiently.design/da/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;
}
```

Ét mønster, sat i tema ved at ændre tre variabler.

## Mønstre bag tekst

### Undgå

- Striber med høj kontrast lige bag brødtekst
- Fine mønstre, der flimrer, når siden scroller
- Mønstre i samme farve som teksten
- Flere forskellige mønstre på én skærm

### Gør

- Mønstre med lav kontrast, to nære nuancer af én farve
- Større, roligere fliser på store flader
- Et massivt panel under tekst, der ligger på et travlt mønster
- Ét mønster som en genkendelig accent

Mønstre er en slags tekstur, og de samme regler gælder: diskrete nok til at blive mærket frem for læst. [Baggrundstekstur](https://gradiently.design/da/guide/background-texture) dækker korn, papir og stof. [Tekst på travle baggrunde](https://gradiently.design/da/guide/type-on-busy-backgrounds) dækker, hvordan ordene forbliver læselige ovenpå.

## FAQ

### Hvordan laver jeg striber i CSS?

Brug `repeating-linear-gradient()` med hårde stop, som `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Skift vinklen for retning og længderne for bredde.

### Hvordan laver jeg et prikmønster i CSS?

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

### Hvordan laver jeg et skakternet mønster i CSS?

Brug `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` med en `background-size` som `24px 24px`. Hver flise rummer fire felter.

### Hvorfor er mine CSS-striber slørede eller ujævne?

Procentpositioner kan lande mellem pixler. Brug pixel- eller em-længder til stop og flisestørrelser, og lad en halv pixel ligge mellem stop på diagonale kanter.

### Er CSS-gradientmønstre bedre end billedmønstre?

Til geometriske mønstre som regel ja: de kræver ingen download, forbliver skarpe i enhver størrelse og kan farves om med CSS-variabler. Organiske eller fotografiske teksturer kræver stadig billeder.