# Støjgradienter: blød farve med en kornet finish

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

Støjgradienter er nemme at beskrive og pillede at få rigtige. Her er fem testede opskrifter, hver med farver, støjindstillinger og grunden til, at de virker, plus hvad hver skyder i en generator faktisk gør.

## The short version

- En støjgradient er en blød farveblanding med et lag fin tilfældig støj ovenpå, som giver den en trykt, taktil finish og skjuler banding.
- De to vigtigste indstillinger er støjens frekvens, der styrer kornstørrelsen, og opaciteten, der styrer, hvor kraftig den ser ud.
- Fraktal støj med en frekvens mellem 0,6 og 0,9, blandet i Overlay eller Soft Light ved 8 til 20 procents opacitet, passer til de fleste skærmbaggrunde.
- Mørke støjgradienter kræver mindre støj end lyse, fordi korn er mest synligt i skygger og mellemtoner.
- I CSS kan støj tegnes med et inline SVG-filter med `feTurbulence`, så det forbliver skarpt i alle størrelser og ikke kræver nogen billedfil.

En **støjgradient** er en blød farveblanding med et fint lag tilfældig støj lagt ovenpå, så farven føles trykt frem for renderet. Blandingen giver dig farven og lysets retning; støjen giver dig en overflade og forhindrer blandingen i at bryde op i bånd. Nedenfor finder du fem opskrifter at kopiere og derefter en ligefrem forklaring på hver generatorindstilling, så du kan lave dine egne.

## Fem opskrifter på støjgradienter

Hver opskrift er en basisgradient og en støjindstilling. Gradienterne vises her uden støj, så du kan se farven; tabellen nedenfor angiver den støj, der skal lægges ovenpå. De er bevidst forskellige: én mørk, én lys, én varm, én kølig, én kraftig.

- 1. Natviolet: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Ferskenpapir: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Solnedgangsplakat: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Dyb lagune: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Klar blå: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

De fem basisblandinger før støj. Klik på en for at kopiere dens CSS.

| Opskrift | Frekvens | Blanding | Opacitet | Hvorfor |
| --- | --- | --- | --- | --- |
| 1. Natviolet | 0,85 med 3 oktaver | Overlay | 8 % | Mørke toner viser nemt korn, så hold det let |
| 2. Ferskenpapir | 0,65 med 4 oktaver | Multiply | 10 % | Multiply gør kun mørkere, så den lyse bund forbliver blød |
| 3. Solnedgangsplakat | 0,6 med 3 oktaver | Overlay | 20 % | Kraftig farve kan bære tungere, grovere korn som et serigrafi |
| 4. Dyb lagune | 0,9 med 2 oktaver | Soft Light | 12 % | Fint korn holder en kølig blanding ren |
| 5. Klar blå | 0,75 med 3 oktaver | Soft Light | 14 % | Blå til lyseblå får slem banding; støj glatter det ud |

Støjindstillinger for hver opskrift med fraktal støj i monokrom. Frekvens og oktaver svarer direkte til SVG-filteret i koden nedenfor.

## Indstillingerne i en støjgradient-generator forklaret

Alle [gradientgeneratorer](https://gradiently.design/da/guide/gradient-generator) med en støjfunktion og alle SVG-støjfiltre bruger en udgave af de samme kontroller. Når du ved, hvad hver af dem gør, kan du læse enhver opskrift og rette ethvert resultat.

| Indstilling | Hvad den ændrer | Godt udgangspunkt |
| --- | --- | --- |
| **Frekvens** (skala, størrelse) | Kornstørrelse. Højere er finere, lavere er grovere. | 0,6 til 0,9 til skærme |
| **Oktaver** (detalje) | Lag af detaljer i støjen. Flere ser rigere ud og koster mere at tegne. | 2 til 4 |
| **Type** | Fraktal støj er blød og skyagtig; turbulens er skarpere og mere stribet. | Fraktal støj |
| **Farve** | Monokrom holder din palet præcis; farvestøj tilføjer filmagtige prikker. | Monokrom |
| **Blandingstilstand** | Hvordan støjen blandes med farven. Overlay tilføjer kontrast, Soft Light er blidere, Multiply gør kun mørkere. | Overlay eller Soft Light |
| **Opacitet** (mængde) | Samlet styrke. | 8 til 20 % |
| **Seed** | Hvilket tilfældigt mønster du får. Skift det, hvis du ser en klump, du ikke kan lide. | Hvilken som helst |

Kontrollerne bag enhver støjgenerator, i almindelige ord.

> **Bedøm støjen i den endelige størrelse** Støj, der ser rigtig ud zoomet ind på en bærbar, forsvinder ofte på en telefon eller bliver til grød efter en upload. Tjek eksporten i den størrelse, folk vil se den, på den skærm, de vil bruge.

## Sådan laver du en støjgradient i CSS

Den reneste metode lægger et SVG-støjbillede over din gradient i én `background`-erklæring og blander dem. Skift gradienten ud med en af opskrifterne ovenfor, og sæt frekvens og opacitet ud fra tabellen.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

Opskrift 1 i CSS. Støjen ligger på et pseudo-element under indholdet, så teksten forbliver skarp. `stitchTiles` får flisen til at gentage sig uden sømme.

### Metoden med kraftige prikker

Vil du have et kraftigere, næsten risografisk udtryk, så læg støjen og gradienten i samme lag, og skub dem gennem et kontrastfilter. Støjen bliver knust til hårde prikker, der følger gradientens lys. Det er mere højrøstet end opskrift 3, så brug det til plakater og herobannere, ikke bag brødtekst.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Kontrasten knuser blød støj til prikker, og den kraftige lysstyrke skubber resten mod hvid. Multiply lægger derefter resultatet over et farvet forældreelement. Justér de to filterværdier sammen, og hold teksten i et separat lag ovenover.

## Vælg den rigtige støj til formatet

Støj er relativ til lærredet. Det samme filter virker fint på en story på telefonen og groft på et lille banner, så skalér frekvensen til formatet i stedet for at genbruge én fil overalt.

En lodret nedtællingsstory på en kornet violet gradientbaggrund

En story i 1080×1920 ses tæt på en telefon: hold støjen fin og ret let.

En bred hero på et website med en overskrift over en blødt kornet varm gradient

En hero på et website i 1920×1080 fylder en stor skærm: sænk opaciteten, for store flader gør støj tydelig.

- **Stories og opslag:** frekvens omkring 0,8, opacitet 8 til 14 procent. Lidt mere, end du tror, fordi uploads blødgør den.
- **Heroes på websites:** frekvens 0,7 til 0,9, opacitet 4 til 10 procent. Se [herobaggrunde til websites](https://gradiently.design/da/guide/website-hero-background).
- **Plakater til tryk:** grovere korn, frekvens 0,5 til 0,7 i den endelige pixelstørrelse, så det overlever trykpressen.
- **Mørke baggrunde:** halvér din sædvanlige mængde. [Mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) forklarer, hvorfor skygger viser korn først.

## Støjgradient eller kornet gradient

Det er den samme idé med forskellig vægt. Folk siger kornet gradient, når de mener udtrykket, og støjgradient, når de mener, hvordan den er lavet. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) handler om, hvorfor korn virker, og hvor du skal placere det; denne side er opskriftsbogen. Vil du have tekstur uden en farveblanding, så start i stedet med [kornet tekstur](https://gradiently.design/da/guide/textured-background).

Vil du helst slippe for at justere skydere overhovedet, har hver Gradiently Mark sin egen kornindstilling ved siden af farver, lys og bevægelse, gengivet på ny i hver størrelse, så støjen aldrig strækkes eller sløres. Design gratis med enhver Mark, som ingen har sikret sig.

## FAQ

### Hvad er en støjgradient?

En blød farveblanding med et fint lag tilfældig støj ovenpå. Støjen giver den en trykt finish og skjuler banding.

### Hvilke støjindstillinger skal jeg bruge til en gradient?

Fraktal støj, monokrom, en frekvens på 0,6 til 0,9 og 2 til 4 oktaver, blandet i Overlay eller Soft Light ved omkring 8 til 20 procents opacitet.

### Hvordan tilføjer jeg støj til en gradient i CSS?

Læg en inline SVG med et `feTurbulence`-filter over gradienten på et pseudo-element, og sæt `mix-blend-mode: overlay` med lav opacitet.

### Hvorfor ser min støjgradient sløret ud efter upload?

Platforme komprimerer billeder igen og glatter fine detaljer ud. Eksportér i platformens præcise størrelse som PNG eller JPEG i høj kvalitet, og brug lidt mere støj til opslag på sociale medier.

### Er en støjgradient det samme som en kornet gradient?

Ja, i praksis. Kornet beskriver udtrykket, og støj beskriver den metode, der bruges til at lave det.