# CSS-mönster med repeterande gradienter

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

Hårda färgstopp gör gradienter till former, och background-size gör formerna till plattor. Med de två idéerna ritar du de flesta klassiska mönster på några rader, helt utan bildfiler.

## The short version

- CSS-mönster ritas med gradienter som har hårda färgstopp, så att färgerna växlar direkt i stället för att blandas.
- Funktionerna repeating-linear-gradient, repeating-radial-gradient och repeating-conic-gradient upprepar sina stopp tills elementet är fyllt, vilket ger ränder, ringar och strålar.
- background-size gör en enda gradient till en platta, och så byggs prickrutnät, linjerutnät, schackrutor och gingham.
- Stoppositioner i pixlar håller ränderna skarpa och jämna, medan procent kan ge ojämna och suddiga kanter.
- Mönster bakom text bör ha låg kontrast, så att orden är lätta att läsa.

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

- Diagonala ränder: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Nålrand: `repeating-linear-gradient(90deg, #0f172a 0 23px, #475569 23px 24px)`
- Ringar: `repeating-radial-gradient(circle at 50% 50%, #fef3c7 0 8px, #fcd34d 8px 16px)`
- Strålar: `repeating-conic-gradient(#0f766e 0 15deg, #115e59 15deg 30deg)`
- Polkagrisrand: `repeating-linear-gradient(-45deg, #fdf2f8 0 14px, #f9a8d4 14px 18px)`
- Linjerat papper: `repeating-linear-gradient(0deg, #eff6ff 0 27px, #bfdbfe 27px 28px)`

Sex mönster, vart och ett en enda repeterande gradient. Kopiera vilket som helst rakt in i `background`.

## 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](https://gradiently.design/sv/guide/css-linear-gradient) går igenom stopp, hints och hårda 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);
```

Från blandning till kant till mönster, i tre steg.

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

| Mönster | Stopp | Effekt |
| --- | --- | --- |
| Jämna ränder | `A 0 10px, B 10px 20px` | Lika breda band, upprepning på 20 px |
| Nålrand | `A 0 23px, B 23px 24px` | En linje på 1 px var 24:e px |
| Markis | `A 0 40px, B 40px 80px` vid `90deg` | Breda lodräta band |
| Dubbellinje | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | Två tunna linjer tätt intill varandra |

Randrecept. A och B är dina två färger, och det sista stoppet bestämmer hur lång upprepningen är.

> **Skarpa diagonaler** Hårda kanter i vinkel kan se hackiga ut. Lämnar du en halv pixel mellan stoppen, som i `#1e293b 0 10px, #334155 10.5px 20px`, får varje kant lite kantutjämning och ser mjukare ut.

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

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

Ett ritningsrutnät, ett prickrutnät och en schackruta. Var och en är en platta som upprepas av `background-size`.

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

```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ött gingham och ett himmelsblått sicksack. I sicksacken är de två första lagren förskjutna en halv platta så att trianglarna låser i varandra.

## 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](https://gradiently.design/sv/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; }
}
```

Ränder som kryper fram längs en förloppsindikator. Animationens sträcka är lika med plattans bredd, så loopen är sömlös.

## 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](https://gradiently.design/sv/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 genom att ändra tre variabler.

## Mönster bakom text

### Undvik

- Kontrastrika ränder direkt bakom brödtext
- Fina mönster som flimrar när sidan rullas
- Mönster i samma färg som texten
- Flera olika mönster på en och samma skärm

### Gör så här

- Mönster med låg kontrast, två närliggande nyanser av samma färg
- Större, lugnare plattor på stora ytor
- En solid panel under text som ligger över ett stökigt mönster
- Ett mönster som ett igenkännbart accentdrag

Mönster är en sorts textur, och samma regler gäller: diskreta nog att kännas snarare än läsas. [Bakgrundstextur](https://gradiently.design/sv/guide/background-texture) tar upp korn, papper och tyg, och [text på stökiga bakgrunder](https://gradiently.design/sv/guide/type-on-busy-backgrounds) handlar om att hålla orden läsbara ovanpå.

## FAQ

### Hur gör jag ränder i CSS?

Använd `repeating-linear-gradient()` med hårda stopp, till exempel `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Ändra vinkeln för riktning och längderna för bredd.

### Hur gör jag ett prickmönster i CSS?

Rita en prick med `radial-gradient(#ca8a04 1.5px, transparent 2px)` och upprepa den med `background-size: 20px 20px`.

### Hur gör jag en schackruta i CSS?

Använd `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` med en `background-size` som `24px 24px`. Varje platta rymmer fyra rutor.

### Varför blir mina CSS-ränder suddiga eller ojämna?

Procentpositioner kan hamna mellan pixlar. Använd pixel- eller em-längder för stopp och plattstorlekar, och lämna en halv pixel mellan stoppen vid diagonala kanter.

### Är CSS-gradientmönster bättre än bildmönster?

För geometriska mönster oftast ja: de kräver ingen nedladdning, är skarpa i alla storlekar och kan färgsättas om med CSS-variabler. Organiska eller fotografiska texturer behöver fortfarande bilder.