# CSS-støjtekstur: tilføj korn til gradienter med SVG

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

Et svagt lag støj skjuler banding og får flad skærmfarve til at føles som tryk eller film. Her er SVG-filteret bag, tunet og klar til at indsætte.

## The short version

- En CSS-støjtekstur laves som regel med et SVG-feTurbulence-filter, indlejret som et lille data-URI-billede og lagt i fliser over en gradient.
- feTurbulence-værdien baseFrequency sætter kornstørrelsen: højere værdier giver finere korn, lavere værdier giver groft, skyet støj.
- Støj virker bedst lagt over gradienten på et pseudoelement med en blandingstilstand som soft-light eller overlay og lav opacity.
- Korn skjuler gradientbanding, fordi det bryder de synlige kanter mellem nabonuancer op i fin, tilfældig variation.
- Et flisebelagt støjbillede er billigt at gengive, mens et levende SVG-filter på et stort element, eller en animation af det, koster langt mere.

En **CSS-støjtekstur** er en fin, tilfældig spraglethed lagt over en farve eller gradient for at give den korn. CSS har ingen støjfunktion, så den almindelige kilde er SVG: filteret `feTurbulence` genererer støj, du pakker det ind i en lille SVG, indlejrer den som en data-URI og lægger den i fliser over din gradient med lav styrke. Resultatet ligner filmkorn eller trykt papir og retter i det stille banding, de synlige trin, der opstår i store, bløde gradienter.

Hvorfor korn får farve til at se mere eksklusiv ud, dækkes i [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients). Denne guide er implementeringen.

## SVG-støjfilteret

```html
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" />
</svg>
```

En flise på 240 pixel med grå støj. Gem den som noise.svg, eller indlejr den som vist nedenfor.

| Attribut | Værdi her | Hvad den styrer |
| --- | --- | --- |
| `type` | `fractalNoise` | Blødt, jævnt korn. `turbulence` giver mere stribet, krusende støj. |
| `baseFrequency` | `0.8` | Kornstørrelse. Omkring 0,6 til 0,9 er fint korn, 0,1 til 0,3 er skyet. |
| `numOctaves` | `3` | Lag af detaljer. Ud over omkring 4 er forskellen svær at se. |
| `stitchTiles` | `stitch` | Får flisens kanter til at passe sammen, så gentagelser ikke har sømme. |
| `feColorMatrix` saturate 0 | `0` | Fjerner den tilfældige farve og efterlader gråt korn. |

De indstillinger, der betyder noget. [MDN’s reference for feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) dokumenterer resten.

## Indlejr støj som data-URI

En separat fil virker, men indlejring sparer en forespørgsel og holder effekten ét sted. I en data-URI skal tegn, der betyder noget i URL’er, kodes: `<` bliver til `%3C`, `>` bliver til `%3E`, `#` bliver til `%23`, og `%` bliver til `%25`. Brug enkelte anførselstegn inde i SVG’en, så de ikke støder sammen med de dobbelte omkring URL’en.

```css
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Den samme flise som en brugerdefineret egenskab, du kan genbruge overalt. At glemme at kode `#` som `%23` er den sædvanlige grund til, at den ikke viser noget i Firefox.

## Læg støj over en gradient

Læg støjen på et pseudoelement over gradienten, og styr den med to knapper: en blandingstilstand, der afgør, hvordan det grå korn blandes med farven under, og opacity, der afgør, hvor stærk den er. `soft-light` holder farverne rene og er den blideste. `overlay` tilføjer mere kontrast. `pointer-events: none` forhindrer laget i at blokere klik.

```css
.grain {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
}
```

Korn mellem gradienten og indholdet: teksten inde i `.grain` forbliver skarp.

- Skumringsviolet: korn blødgør blandingen: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)`
- Skiferskær: korn stopper banding: `radial-gradient(ellipse at 30% 20%, #334155, #0f172a 70%)`
- Ferskenmorgen: korn læses som papir: `linear-gradient(180deg, #fef3c7, #fdba74 60%, #fb7185)`

Tre gradienter, der får mest ud af korn. Mørke fades med lav kontrast som den i midten er der, hvor banding viser sig først.

Foretrækker du ét enkelt element uden pseudoelement, så list støjen først i `background-image`, og sæt `background-blend-mode: soft-light, normal`. Du mister den separate opacity-knap, så bag styrken ind i SVG’en i stedet, for eksempel med `opacity='0.5'` på `rect`.

## Hvor meget korn er nok

1. **Start svagt** Begynd ved `opacity: 0.3` med `soft-light`. Du bør næsten ikke lægge mærke til det i en armslængdes afstand.
2. **Tjek det mørkeste område** Banding bor i mørke, langsomme fades. Hæv opacity, til trinene dér opløses, og stop så.
3. **Tilpas kornet til størrelsen** Helskærmsheroer kan tåle lidt grovere korn, omkring 0,6. Kort og knapper vil have fint korn, omkring 0,9.
4. **Tjek på en telefon og en stor skærm** Korn, der ser rigtigt ud på én skærm, kan ligne støv på en anden. Sigt efter tekstur, du mærker, frem for ser.
5. **Tjek teksten ovenpå** Korn må ikke forringe læsbarheden. Ligger lille tekst på teksturen, så sænk styrken, eller hold teksten på et roligere område.

### For meget

- Korn synligt fra den anden side af rummet
- Farverne bliver grå og snavsede
- Groft, skyet støj på små komponenter
- Tekstkanter ser slørede ud mod spragletheden

### Omtrent rigtigt

- Korn, der kun opdages på tæt hold
- Farverne forbliver rene med soft-light
- Fint korn tilpasset elementets størrelse
- Banding væk, tekst skarp

## Ydeevne for CSS-støj

En flisebelagt data-URI er billig: browseren gengiver den lille flise én gang og gentager den, og et statisk lag tegnes én gang. Den dyre version er at anvende filteret live på et stort element med `filter: url(#noise)`, som kører filteret over hver pixel, hver gang området gentegnes. Animerer du korn, til et flimrende filmudtryk, så flyt det flisebelagte lag med `transform` i nogle få hakkende trin i stedet for at generere støj igen, og slå det fra ved [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).

```css
.grain {
  overflow: hidden;
}

.grain::after {
  inset: -50%;
  animation: flicker 0.6s steps(3) infinite;
}

@keyframes flicker {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
}

@media (prefers-reduced-motion: reduce) {
  .grain::after { animation: none; }
}
```

Animeret korn ved at flytte en overstor flise. Den negative inset holder kanterne dækket, mens den flytter sig.

En forrenderet PNG- eller WebP-støjflise på omkring 128 til 256 pixel er en lige så god kilde, hvis du allerede har en. Korn er også én ingrediens i en bredere familie af overflader, fra papir til glas, dækket i [baggrundstekstur](https://gradiently.design/da/guide/background-texture). Det er også det afsluttende lag på en [CSS mesh gradient](https://gradiently.design/da/guide/css-mesh-gradient).

Korn er indbygget i hvert Gradiently-Mark som en materialeindstilling ved siden af lys og bevægelse, så designs lavet med ét bærer tekstur uden nogen kode.

Et Mark med korn som en del af sit materiale, gengivet live og ikke lagt på bagefter.

## FAQ

### Hvordan tilføjer jeg en støjtekstur i CSS?

Indlejr en SVG med et `feTurbulence`-filter som data-URI, læg den i fliser på et pseudoelement over din gradient, og sæt en blandingstilstand som `soft-light` med lav opacity.

### Hvorfor vises min SVG-støj-data-URI ikke?

Som regel et ukodet tegn. Kod `#` som `%23`, `%` som `%25` og vinkelparenteserne som `%3C` og `%3E` i data-URI’en, og brug enkelte anførselstegn inde i SVG’en.

### Retter korn gradientbanding?

Ja, i de fleste tilfælde. Tilfældig fin variation bryder de hårde kanter mellem nabonuancer op, så øjet ikke længere ser trin.

### Hvilken baseFrequency skal jeg bruge til korn?

Omkring 0,6 til 0,9 giver fint, filmagtigt korn. Lavere værdier som 0,2 giver stor, skyet støj.

### Er CSS-støj dårlig for ydeevnen?

Et lille flisebelagt støjbillede er billigt. Levende SVG-filtre på store elementer og konstant genereret støj er det, der koster mest.