# Gradienter med støy: jevne farger med kornet overflate

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

Gradienter med støy er lette å beskrive og vanskelige å finjustere. Her er fem utprøvde oppskrifter med farger, støyinnstillinger og forklaring, samt hva hver glidebryter i generatoren gjør.

## The short version

- En gradient med støy er en jevn fargeblanding med et lag fint, tilfeldig støy oppå, som gir et trykt, taktilt preg og skjuler fargebånd.
- De to viktigste innstillingene er støyfrekvens, som styrer kornstørrelsen, og opasitet, som styrer hvor tydelig støyen blir.
- Fraktalstøy med frekvens mellom 0,6 og 0,9, blandet med Overlegg eller Mykt lys ved 8 til 20 prosent opasitet, passer de fleste skjermbakgrunner.
- Mørke støygradienter trenger mindre støy enn lyse, fordi korn er mest synlig i skygger og mellomtoner.
- I CSS kan støy tegnes med et innebygd SVG-filter av typen `feTurbulence`, slik at den holder seg skarp i alle størrelser uten bildefil.

En **gradient med støy** er en jevn fargeblanding med et fint lag tilfeldig støy oppå, slik at fargen føles trykt fremfor rendret. Blandingen gir fargen og lysretningen; støyen gir en overflate og hindrer blandingen i å brytes opp i bånd. Nedenfor er fem oppskrifter du kan kopiere, fulgt av en enkel forklaring av hver generatorinnstilling, slik at du kan lage din egen.

## Fem oppskrifter på gradienter med støy

Hver oppskrift består av en grunngradient og en støyinnstilling. Gradientene vises uten støy her, slik at du kan se fargen. Tabellen under angir støyen du legger oppå. De er bevisst ulike: én mørk, én lys, én varm, én kjølig og én kraftig.

- 1. Nattfiolett: `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. Dyp 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 grunnblandingene før støy. Klikk på en for å kopiere CSS-en.

| Oppskrift | Frekvens | Blanding | Opasitet | Hvorfor |
| --- | --- | --- | --- | --- |
| 1. Nattfiolett | 0,85, 3 oktaver | Overlegg | 8% | Mørke toner viser korn lett, så hold det forsiktig |
| 2. Ferskenpapir | 0,65, 4 oktaver | Multipliser | 10% | Multipliser gjør bare mørkere, så den lyse bunnen forblir myk |
| 3. Solnedgangsplakat | 0,6, 3 oktaver | Overlegg | 20% | Kraftig farge tåler sterkere, grovere korn som et silketrykk |
| 4. Dyp lagune | 0,9, 2 oktaver | Mykt lys | 12% | Fint korn holder en kjølig blanding ren |
| 5. Klar blå | 0,75, 3 oktaver | Mykt lys | 14% | Blått til lyseblått får lett fargebånd; støy jevner det ut |

Støyinnstillinger for hver oppskrift, med monokrom fraktalstøy. Frekvens og oktaver tilsvarer innstillingene i SVG-filteret i koden nedenfor.

## Innstillinger i støygradientgeneratorer forklart

Alle [gradientgeneratorer](https://gradiently.design/nb/guide/gradient-generator) med et støyvalg og alle SVG-støyfiltre bruker en variant av de samme kontrollene. Når du vet hva hver gjør, kan du lese enhver oppskrift og rette ethvert resultat.

| Innstilling | Hva den endrer | Godt utgangspunkt |
| --- | --- | --- |
| **Frekvens** (skala, størrelse) | Kornstørrelse. Høyere gir finere, lavere gir grovere. | 0,6 til 0,9 for skjermer |
| **Oktaver** (detalj) | Detaljlag i støyen. Flere gir et rikere uttrykk og krever mer å tegne. | 2 til 4 |
| **Type** | Fraktalstøy er myk og skyaktig; turbulens er skarpere og mer stripete. | Fraktalstøy |
| **Farge** | Monokromt bevarer paletten nøyaktig; farget støy gir filmlignende prikker. | Monokrom |
| **Blandingsmodus** | Hvordan støy blandes med farge. Overlegg gir kontrast, Mykt lys er mildere, Multipliser gjør bare mørkere. | Overlegg eller Mykt lys |
| **Opasitet** (mengde) | Samlet styrke. | 8 til 20% |
| **Frøverdi** | Hvilket tilfeldig mønster du får. Endre den hvis du ser en klump du misliker. | Valgfri |

Kontrollene bak alle støygeneratorer, med enkle ord.

> **Vurder støy i endelig størrelse** Støy som ser riktig ut når du zoomer inn på en bærbar PC, forsvinner ofte på en telefon eller blir grøtete etter opplasting. Sjekk eksporten i størrelsen folk skal se den, på skjermen de skal bruke.

## Slik lager du en gradient med støy i CSS

Den ryddigste metoden legger et SVG-støybilde over gradienten i én `background`-deklarasjon og blander dem. Bytt gradienten med en oppskrift over, og sett frekvens og opasitet 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;
}
```

Oppskrift 1 i CSS. Støyen ligger på et pseudoelement under innholdet, slik at teksten forblir skarp. `stitchTiles` lar flisen gjentas uten skjøter.

### Metoden med kontraststerke prikker

For et kraftigere, nesten risografisk uttrykk legger du støy og gradient i samme lag og kjører dem gjennom et kontrastfilter. Støyen presses til harde prikker som følger gradientens lys. Dette er mer fremtredende enn oppskrift 3, så bruk det til plakater og toppbannere fremfor bak 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 */
}
```

Kontrast presser myk støy til prikker, og høy lysstyrke skyver resten mot hvitt. Multipliser legger deretter resultatet over et farget foreldreelement. Juster de to filterverdiene sammen, og hold tekst i et eget lag over.

## Velge riktig støy til formatet

Støy er relativ til lerretet. Samme filter virker fint på en telefonstory og grovt på et lite banner. Tilpass derfor frekvensen til formatet fremfor å bruke én fil overalt.

En stående nedtellingsstory på en kornete fiolett gradientbakgrunn

En story i 1080×1920 ses på nært hold på en telefon: Hold støyen fin og ganske forsiktig.

Et bredt toppbilde til et nettsted med en overskrift over en varm gradient med mykt korn

Et toppbilde i 1920×1080 fyller en stor skjerm: Senk opasiteten, fordi store flater gjør støy tydelig.

- **Stories og innlegg:** frekvens rundt 0,8, opasitet 8 til 14 prosent. Litt mer enn du tror, siden opplasting mykner den.
- **Toppbilder på nettsteder:** frekvens 0,7 til 0,9, opasitet 4 til 10 prosent. Se [bakgrunner til toppbilder](https://gradiently.design/nb/guide/website-hero-background).
- **Trykkplakater:** grovere korn, frekvens 0,5 til 0,7 i endelig pikselstørrelse, slik at det overlever trykkingen.
- **Mørke bakgrunner:** Halver den vanlige mengden. [Mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) forklarer hvorfor skygger viser korn først.

## Støygradient eller kornete gradient

De er samme idé med ulik vektlegging. Folk sier kornete gradient når de mener uttrykket, og støygradient når de mener hvordan den lages. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) dekker hvorfor korn fungerer og hvor det bør plasseres; denne siden er oppskriftsboken. Vil du ha tekstur uten en fargeblanding, start med [korntekstur](https://gradiently.design/nb/guide/textured-background) i stedet.

Vil du slippe glidebrytere helt, har hver Mark i Gradiently sin egen korninnstilling sammen med farger, lys og bevegelse. Den rendres på nytt i hver størrelse, så støyen aldri strekkes eller blir uskarp. Design gratis med enhver Mark som ingen har sikret seg.

## FAQ

### Hva er en gradient med støy?

En jevn fargeblanding med et fint lag tilfeldig støy oppå. Støyen gir et trykt preg og skjuler fargebånd.

### Hvilke støyinnstillinger bør jeg bruke til en gradient?

Monokrom fraktalstøy med frekvens på 0,6 til 0,9 og 2 til 4 oktaver, blandet med Overlegg eller Mykt lys ved omtrent 8 til 20 prosent opasitet.

### Hvordan legger jeg støy på en gradient i CSS?

Legg en innebygd SVG med et `feTurbulence`-filter over gradienten på et pseudoelement, og angi `mix-blend-mode: overlay` med lav opasitet.

### Hvorfor blir støygradienten uskarp etter opplasting?

Plattformer komprimerer bilder på nytt og glatter ut fine detaljer. Eksporter i nøyaktig plattformstørrelse som PNG eller JPEG med høy kvalitet, og bruk litt mer støy til sosiale innlegg.

### Er en støygradient det samme som en kornete gradient?

Ja, i praksis. Kornete beskriver uttrykket, mens støy beskriver metoden som lager det.