# Korniga gradienter: därför får lite brus färg att se dyr ut

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

En ren gradient ser ut som en skärmstandard. Samma gradient med ett fint lager korn ser ut som ett tryck, en filmruta eller en målad vägg. Här är varför, hur mycket du ska lägga till och hur du gör det.

## The short version

- En kornig gradient är en färgövergång med ett fint lager slumpmässigt brus över, så att ytan ser texturerad ut i stället för helt jämn.
- Korn döljer bandning, eftersom slumpmässig variation bryter upp de synliga stegen mellan de begränsade nyanser en skärm kan visa.
- Korn får digital färg att läsas som fysisk och för tankarna till film, risografitryck och matt papper.
- Korn ska kännas mer än ses: börja subtilt, kontrollera i full storlek och lägg till mer bara där ytan är stor och lugn.
- I CSS är den vanliga metoden ett SVG-brusskikt med feTurbulence som läggs över gradienten med ett blandningsläge och låg opacitet.

En **kornig gradient** är en gradient med ett fint lager slumpmässigt brus lagt över, så att färgen har en synlig textur i stället för en helt jämn, digital yta. Den blev populär av ett praktiskt skäl och ett visuellt: korn döljer de ränder som jämna övergångar ofta visar, och det får färg på en skärm att se ut som något tryckt, filmat eller målat. Gjort väl märker de flesta inte kornet alls. De tycker bara att färgen ser bättre ut.

## Därför får korn en gradient att se bättre ut

Det finns tre skäl, och de förstärker varandra.

- **Det döljer bandning.** De flesta bilder har 256 nyanser per färgkanal. En mild övergång över en stor yta måste stega mellan dem, och ögat plockar ut stegen som ränder. Slumpmässigt brus sprider pixlar över angränsande nyanser, så att kanterna mellan stegen försvinner. Det är samma idé som dithering. Se [gradientbandning](https://gradiently.design/sv/guide/gradient-banding).
- **Det ger taktilitet.** Fysiska ting är aldrig helt jämna. Film har korn, papper har struktur och tryckt bläck ligger ojämnt. En liten mängd brus lånar de associationerna, så att en platt digital övergång börjar kännas som ett material.
- **Det klarar komprimering bättre.** Sociala plattformar och meddelandeappar komprimerar om bilder. Jämna övergångar är precis vad hård komprimering plattar till block, och ett fint korn ger kodaren detaljer att hålla fast vid. Testa din export, dock: mycket stark komprimering kan smeta ut korn också.

Ett stående inlägg med titeln Mjukt ljus på en gradient med ett fint synligt korn

På en Mark är korn en del av receptet, renderat live tillsammans med färgen.

En kvadratisk version av samma korniga gradientinlägg

I kvadratisk storlek renderas Marken på nytt för formatet, så att kornet förblir fint i stället för att skalas upp.

## Hur mycket korn du ska lägga till

Det vanligaste misstaget är för mycket. Kraftigt korn ser ut som en smutsig lins eller ett telefonfoto i dåligt ljus. Rätt mängd beror på storleken på det lugna området, hur mörk gradienten är och var den ska ses. Se siffrorna nedan som utgångspunkter för ett brusskikt i blandningsläget Overlay eller Soft Light, och bedöm sedan på ögonmått i full storlek.

| Användning | Startopacitet | Kornstorlek |
| --- | --- | --- |
| Gränssnittsbakgrunder, bakom brödtext | Runt 5 till 10 % | Fint |
| Inlägg i sociala medier och hero-sektioner | Runt 10 till 20 % | Fint till medelstort |
| Affischer, skivomslag, djärva redaktionella looks | Runt 20 till 35 % | Medelstort till grovt |
| Mörka gradienter som lätt får bandning | Nog för att dölja stegen, inte mer | Fint |

Utgångspunkter, inte regler. Kontrollera alltid kornet i 100 % zoom på den enhet det ska ses på.

> **Ögonknipstestet** Zooma till 100 %, titta på designen och kliv sedan tillbaka. Om du kan se kornet från normalt betraktningsavstånd på en design med mycket text, halvera det.

## Var du ska lägga kornet

Korn behöver inte vara jämnt. Det ser mest naturligt ut på stora, lugna färgytor och på mörka toner, där filmkorn syns mest i verkligheten. Håll det ljusare bakom liten text, eftersom brus vid bokstävernas kanter får dem att se mjuka ut. Och håll din logotyp och text ovanför kornlagret, inte under det, så att de förblir skarpa.

### Undvik

- Korn så starkt att det läses som smuts eller dåligt ljus
- Korn över logotyper och liten text
- En liten kornig bild som skalas upp, så att kornet blir kladdiga fläckar
- Färgat, regnbågsprickigt brus på en lugn palett

### Gör så här

- Korn du känner mer än ser
- Text och logotyper ovanför kornlagret
- Korn renderat eller kaklat i slutlig storlek
- Enfärgat brus blandat in i färgerna under

## Så lägger du till korn på en gradient i CSS

Den lättaste metoden är ett SVG-brusfilter som bakgrundsbild. `feTurbulence` genererar slumpmässigt brus, `feColorMatrix` tar bort dess färg så att det inte ger färgade prickar, och ett blandningsläge blandar in det i gradienten under. Högre värden på `baseFrequency` ger finare korn; `stitchTiles` får plattan att upprepas utan skarvar.

```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 enfärgat korn i blandningsläget Overlay. `z-index: -1` inuti ett isolerat överordnat element håller kornet ovanför gradienten men under all text.

Om du föredrar en bild fungerar en liten kaklad brusbild sparad som PNG på samma sätt som SVG:n. Håll den förlustfri: JPEG-brusplattor får komprimeringsartefakter. För fler mönster och texturknep utan bilder, se [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture).

## Så lägger du till korn i designverktyg

1. **Bygg gradienten först** Få färgerna, stoppen och kompositionen rätt på ett rent lager. Korn kan inte rädda en grumlig övergång; se [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients).
2. **Lägg till ett separat brusskikt** Använd verktygets brusfunktion eller en brustextur på ett eget lager ovanför gradienten, så att du kan justera det utan att röra färgen.
3. **Gör det enfärgat** Ta bort färgen ur bruset så att det inte ger färgade prickar och sätt sedan lagret till Overlay eller Soft Light.
4. **Sänk opaciteten tills det försvinner, gå sedan tillbaka lite** Rätt mängd är oftast strax över den punkt där du slutar lägga märke till det.
5. **Exportera i slutlig storlek, förlustfritt om du kan** Att skala upp en kornig bild förstorar kornet till fläckar. Exportera PNG i exakt storlek, eller en JPEG i hög kvalitet för foton.

## Korn i tryck

Korn designat för en telefonskärm kan bete sig annorlunda på papper. I 300 dpi kan mycket fint brus försvinna helt, och grovt brus kan se ut som ett tryckfel. För affischer och flygblad, gör kornet i tryckupplösning och provtryck det på det riktiga papperet. [Trycka gradienter](https://gradiently.design/sv/guide/print-gradients) tar upp resten av processen.

Korn är också ett av flera material. Papper, glas och siden ändrar var och en vad en gradient säger; [gradienttextur](https://gradiently.design/sv/guide/gradient-texture) jämför dem. Varje Mark bär sin egen kornsinställning vid sidan av sina färger och material, så balansen är redan inställd när du börjar designa.

## FAQ

### Vad är en kornig gradient?

En kornig gradient är en färgövergång med ett fint lager slumpmässigt brus över, så att den ser texturerad ut som film eller tryck i stället för helt jämn.

### Åtgärdar korn gradientbandning?

Oftast ja. Slumpmässigt brus bryter upp de hårda kanterna mellan de begränsade nyanser en skärm kan visa, så att ränderna slutar synas.

### Hur lägger jag till korn på en gradient i CSS?

Lägg en SVG-brusbild med `feTurbulence` över gradienten, ta bort dess färg, ange `mix-blend-mode: overlay` och använd låg opacitet.

### Hur mycket korn ska jag lägga till?

Mindre än du tror. Börja lågt, kontrollera i 100 % zoom på målenheten och sluta strax efter att kornet slutar vara uppenbart.

### Varför ser mitt korn fläckigt ut?

Bilden skalades förmodligen upp efter att kornet lagts till. Lägg till korn i slutlig exportstorlek, eller använd en kaklad brustextur.