# Kornete gradienter: hvorfor litt støy får farge til å se påkostet ut

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

En ren gradient ser ut som en skjermstandard. Den samme gradienten med et fint lag korn ser ut som et trykk, et stillbilde fra en film eller en malt vegg. Her er hvorfor, hvor mye du bør legge til, og hvordan.

## The short version

- En kornete gradient er en fargeovergang med et fint lag tilfeldig støy over, så overflaten ser teksturert ut og ikke helt glatt.
- Korn skjuler banding, fordi tilfeldig variasjon bryter opp de synlige trinnene mellom de begrensede nyansene en skjerm kan vise.
- Korn får digital farge til å leses som fysisk, og minner om film, risotrykk og matt papir.
- Korn bør føles mer enn det ses: start forsiktig, sjekk i full størrelse, og legg bare til mer der flaten er stor og rolig.
- I CSS er den vanlige metoden et støylag med SVG feTurbulence lagt over gradienten med en blandingsmodus og lav opasitet.

En **kornete gradient** er en gradient med et fint lag tilfeldig støy over, så fargen får en synlig tekstur i stedet for en helt glatt, digital overflate. Den ble populær av én praktisk og én visuell grunn: korn skjuler stripene som glatte overganger ofte viser, og det får farge på en skjerm til å se ut som noe trykt, filmet eller malt. Gjort godt legger de fleste ikke merke til kornet i det hele tatt. De synes bare at fargen ser bedre ut.

## Hvorfor korn får en gradient til å se bedre ut

Det er tre grunner, og de forsterker hverandre.

- **Det skjuler banding.** De fleste bilder har 256 nyanser per fargekanal. En slak overgang over et stort område må gå i trinn mellom dem, og øyet plukker ut trinnene som striper. Tilfeldig støy sprer pikslene over nabonyanser, så kantene mellom trinnene forsvinner. Det er samme idé som dithering. Se [banding i gradienter](https://gradiently.design/nb/guide/gradient-banding).
- **Det gir taktilitet.** Fysiske ting er aldri helt glatte. Film har korn, papir har struktur, og trykkfarge legger seg ujevnt. En liten mengde støy låner de assosiasjonene, så en flat digital overgang begynner å føles som et materiale.
- **Det tåler komprimering bedre.** Sosiale plattformer og meldingsapper komprimerer bilder på nytt. Glatte overganger er nettopp det kraftig komprimering flater ut til blokker, og et fint korn gir koderen detaljer å holde fast i. Test likevel eksporten din: svært kraftig komprimering kan også smøre ut korn.

Et stående innlegg med tittelen Mykt lys på en gradient med fint, synlig korn

På en Mark er kornet en del av oppskriften, tegnet direkte sammen med fargen.

En kvadratisk versjon av det samme innlegget med kornete gradient

I kvadratisk størrelse tegnes Marken på nytt for formatet, så kornet holder seg fint i stedet for å skaleres opp.

## Hvor mye korn du bør legge til

Den vanligste feilen er for mye. Kraftig korn ser ut som en skitten linse eller et mobilbilde tatt i dårlig lys. Riktig mengde avhenger av størrelsen på det rolige området, hvor mørk gradienten er, og hvor den skal ses. Se på tallene nedenfor som utgangspunkter for et støylag i blandingsmodusen Overlay eller Soft Light, og vurder så med øyet i full størrelse.

| Bruk | Opasitet å starte med | Kornstørrelse |
| --- | --- | --- |
| Bakgrunner i grensesnitt, bak brødtekst | Rundt 5 til 10 % | Fint |
| Innlegg i sosiale medier og hero-seksjoner | Rundt 10 til 20 % | Fint til middels |
| Plakater, albumgrafikk, dristige redaksjonelle uttrykk | Rundt 20 til 35 % | Middels til grovt |
| Mørke gradienter som lett får banding | Nok til å skjule trinnene, ikke mer | Fint |

Utgangspunkter, ikke regler. Sjekk alltid kornet i 100 % zoom på enheten det skal ses på.

> **Mysetesten** Zoom til 100 %, se på designet, og ta et skritt tilbake. Kan du se kornet fra vanlig betraktningsavstand på et design med mye tekst, halverer du det.

## Hvor kornet bør ligge

Korn trenger ikke å være jevnt. Det ser mest naturlig ut på store, rolige fargeflater og i mørke toner, der filmkorn er mest synlig i virkeligheten. Hold det lettere bak liten tekst, for støy i kantene av bokstaver får dem til å se bløte ut. Og hold logoen og skriften over kornlaget, ikke under, så de forblir skarpe.

### Unngå

- Korn så kraftig at det leses som skitt eller dårlig lys
- Korn over logoer og liten tekst
- Et lite, kornete bilde som skaleres opp, så kornet blir til flekker
- Farget støy med regnbueprikker på en rolig palett

### Gjør

- Korn du føler mer enn du ser
- Skrift og logoer over kornlaget
- Korn tegnet eller flislagt i endelig størrelse
- Ensfarget støy blandet inn i fargene under

## Slik legger du korn på en gradient i CSS

Den letteste metoden er et SVG-støyfilter brukt som bakgrunnsbilde. `feTurbulence` genererer tilfeldig støy, `feColorMatrix` fjerner fargen så den ikke gir fargeprikker, og en blandingsmodus blander den inn i gradienten under. Høyere verdier for `baseFrequency` gir finere korn; `stitchTiles` får flisen til å gjentas uten sømmer.

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

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: 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.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.18;
}
```

En gradient med ensfarget korn i blandingsmodusen Overlay. `z-index: -1` inni en isolert forelder holder kornet over gradienten, men under all tekst.

Foretrekker du et bilde, fungerer et lite støybilde som kan flislegges, lagret som PNG, på samme måte som SVG-en. Hold det tapsfritt: støyfliser i JPEG får artefakter fra komprimeringen. Flere mønstre og teksturtriks uten bilder finner du i [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture).

## Slik legger du til korn i designverktøy

1. **Bygg gradienten først** Få farger, stopp og komposisjon riktig på et rent lag. Korn kan ikke redde en grumsete overgang; se [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).
2. **Legg til et eget støylag** Bruk verktøyets støyeffekt eller en støytekstur på et eget lag over gradienten, så du kan justere det uten å røre fargen.
3. **Gjør det ensfarget** Fjern metningen fra støyen så den ikke gir fargede prikker, og sett laget til Overlay eller Soft Light.
4. **Senk opasiteten til det forsvinner, og gå litt tilbake** Riktig mengde ligger som regel rett over punktet der du slutter å legge merke til det.
5. **Eksporter i endelig størrelse, tapsfritt hvis du kan** Å skalere opp et kornete bilde forstørrer kornet til flekker. Eksporter PNG i nøyaktig størrelse, eller JPEG i høy kvalitet for bilder.

## Korn på trykk

Korn laget for en telefonskjerm kan oppføre seg annerledes på papir. I 300 dpi kan svært fin støy forsvinne helt, og grov støy kan se ut som en trykkfeil. For plakater og flyere lager du kornet i trykkoppløsning og tar et prøvetrykk på det ekte papiret. [Gradienter på trykk](https://gradiently.design/nb/guide/print-gradients) dekker resten av prosessen.

Korn er også ett av flere materialer. Papir, glass og silke endrer hver for seg hva en gradient sier; [gradienttekstur](https://gradiently.design/nb/guide/gradient-texture) sammenligner dem. Hver Mark har sin egen korninnstilling ved siden av farger og materialer, så balansen er allerede satt når du begynner å designe.

## FAQ

### Hva er en kornete gradient?

En kornete gradient er en fargeovergang med et fint lag tilfeldig støy over, så den ser teksturert ut som film eller trykk i stedet for helt glatt.

### Løser korn banding i gradienter?

Som regel, ja. Tilfeldig støy bryter opp de harde kantene mellom de begrensede nyansene en skjerm kan vise, så stripene slutter å være synlige.

### Hvordan legger jeg korn på en gradient i CSS?

Legg et støybilde med SVG `feTurbulence` over gradienten, fjern metningen, sett `mix-blend-mode: overlay` og bruk lav opasitet.

### Hvor mye korn bør jeg legge til?

Mindre enn du tror. Start lavt, sjekk i 100 % zoom på enheten det gjelder, og stopp rett etter at kornet slutter å være åpenbart.

### Hvorfor ser kornet mitt flekkete ut?

Bildet ble sannsynligvis skalert opp etter at kornet ble lagt til. Legg til korn i den endelige eksportstørrelsen, eller bruk en støytekstur som kan flislegges.