# Hvorfor gradienten din har striper, og hvordan du fikser banding

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

Du laget en jevn gradient, og den kom tilbake med striper. Det er banding, og det har en enkel årsak og en håndfull pålitelige løsninger. Her er regnestykket, og så kurene.

## The short version

- Banding i gradienter er synlige striper eller trinn i det som skulle vært en jevn fargeovergang.
- Banding oppstår fordi de fleste bilder bare lagrer 256 nivåer per fargekanal, så en diskret overgang over et stort område må hoppe mellom et lite antall nyanser.
- Banding er verst i mørke gradienter, diskrete gradienter, store gradienter og hardt komprimerte bilder eller videoer.
- Å legge til fint korn eller dithering er den mest pålitelige løsningen, fordi tilfeldig variasjon skjuler kantene mellom trinnene.
- Å eksportere i høy kvalitet, unngå formater med 256 farger som GIF, og utvide fargespennet i overgangen reduserer banding ytterligere.

**Banding i gradienter** er når en jevn gradient viser synlige striper eller trinn i stedet for en sammenhengende overgang. Det skjer fordi digitale bilder bare kan lagre et begrenset antall nyanser per farge, som regel 256 per kanal, og når en gradient endrer seg langsomt over et bredt område, må hver nyanse dekke et bånd av piksler. Øyet ditt er veldig godt til å oppdage kanter, så det plukker ut båndene. Løsningen er som regel å legge til fint korn, eksportere med mindre komprimering eller gi overgangen mer farge å jobbe med.

## Hva som forårsaker banding i gradienter

De fleste bilder bruker 8 biter per kanal: 256 mulige verdier hver for rødt, grønt og blått. Det høres mye ut, og for en kraftig gradient er det nok. Problemet starter når fargene i hver ende ligger tett.

Ta en grå gradient fra `#202020` til `#303030` over en skjerm som er 1920 piksler bred. Hver kanal går bare fra 32 til 48, altså 16 trinn. Gradienten inneholder dermed 16 ulike nyanser, hver omtrent 120 piksler bred. Ingen programvare kan gjøre den jevnere, for det finnes ingen nyanser imellom å bruke.

- Banding: åtte synlige trinn: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #211d52 12.5% 25%, #242059 25% 37.5%, #272260 37.5% 50%, #2a2467 50% 62.5%, #2d266e 62.5% 75%, #302875 75% 87.5%, #332a7c 87.5% 100%)`
- Tilsiktet: én jevn overgang: `linear-gradient(90deg, #1e1b4b 0%, #332a7c 100%)`

Den øverste prøven overdriver banding med åtte harde trinn, så du kan se det på enhver skjerm. Ekte banding ser ut som de myke stripene du får når en mørk, diskret overgang som den andre strekkes bredt eller komprimeres.

## Hvor banding vises mest

| Situasjon | Hvorfor det gir banding |
| --- | --- |
| Mørke gradienter | Folk ser små forskjeller mellom mørke toner lett, og mørke overganger spenner ofte over bare noen få verdier |
| Diskrete overganger med lav kontrast | Få trinn mellom endefargene, så hvert bånd blir bredt |
| Store flater | Samme antall trinn fordelt på flere piksler gir bredere bånd |
| JPEG og opplastinger til sosiale medier | Komprimering forenkler jevne områder til flate blokker |
| Video | Strømmekodeker og 8-biters video flater ut slake overganger, særlig i mørke scener |
| GIF og PNG-8 | Bare 256 farger i hele bildet, for alle kanaler til sammen |

En mørk, diskret gradient i fullskjerm lastet opp som komprimert JPEG treffer nesten alle radene på én gang.

Det er derfor [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) og [aurora-gradienter](https://gradiently.design/nb/guide/aurora-gradients) trenger mest omsorg. Skjønnheten deres hviler på lange, slake overganger gjennom mørke toner, og det er nøyaktig oppskriften på banding.

## Slik fikser du banding i gradienter

1. **Legg til korn eller dithering** Et fint lag med tilfeldig støy sprer pikslene mellom nabonyanser, så øyet ikke lenger finner kantene. Det er den mest pålitelige løsningen, og den får også overflaten til å se rikere ut. Se [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients).
2. **Gi overgangen mer spenn** Større forskjeller i lyshet eller fargetone mellom endefargene gir flere tilgjengelige trinn og smalere bånd. En gradient som også skifter litt i fargetone, bruker flere kombinasjoner av rødt, grønt og blått enn en ren lyshetsovergang.
3. **Jobb i 16 biter der du kan** Bilderedigeringsprogrammer som støtter 16 biter per kanal, beholder langt flere nivåer mens du jobber. Konverter til 8 biter først ved eksport, med dithering slått på.
4. **Eksporter i høy kvalitet** Bruk PNG til flat grafikk, eller JPEG med høy kvalitetsinnstilling til fotografiske bilder. Unngå GIF og PNG-8, som bare beholder 256 farger totalt.
5. **Eksporter i endelig størrelse** Å skalere opp et lite gradientbilde strekker båndene. Tegn eller eksporter i nøyaktig størrelse, eller større, i stedet for å skalere opp.

> **Skjermen din kan være en del av det** Noen skjermer viser færre nyanser enn filen inneholder, og nettlesere er ulike når det gjelder om de dithrer gradienter. Sjekk viktig arbeid på mer enn én skjerm, også en telefon på full lysstyrke.

## Fiks banding i CSS-gradienter

Nettlesere tegner CSS-gradienter direkte, så det finnes ingen eksportinnstilling å endre. To ting hjelper. For det første: utvid overgangen eller legg til et skifte i fargetone. For det andre: legg et diskret støylag over gradienten, som fungerer akkurat som korn i et bilde. [Støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) viser lette måter å lage det laget på uten store bildefiler.

### Gir bånd

- `linear-gradient(#0b0b12, #14141f)` over en hel skjerm
- Én enkelt fargetone fra nesten svart til litt mindre svart
- Ingen tekstur over overflaten

### Holder

- `linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)` med mer spenn
- En mørk overgang som også driver fra grått mot indigo
- Et fint støylag med lav opasitet øverst

## Fiks banding i video og opplastinger til sosiale medier

Sosiale plattformer komprimerer det du laster opp på nytt, og videokodeker er laget for å kaste nettopp den typen fine detaljer som holder gradienter jevne. Her hjelper korn to ganger: det skjuler trinn, og det gir koderen ekte detaljer å beholde. Last opp i plattformens anbefalte størrelse så bildet ikke skaleres en gang til, og eksporter video med en romslig kvalitetsinnstilling. Koder du med ffmpeg, har x264 en innstilling som er tilpasset for å bevare korn.

```bash
# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4
```

Lavere `-crf` betyr høyere kvalitet. `-tune grain` ber koderen beholde støy i stedet for å glatte den bort.

Videobakgrunner i loop er særlig utsatt for dette, fordi de som regel er mørke og langsomme. [Sømløse loopvideoer](https://gradiently.design/nb/guide/seamless-loop-video) går gjennom resten av eksporten.

## Forebygg banding fra starten

- Velg gradienter med nok endring i lyshet eller fargetone for størrelsen
- Planlegg for korn fra begynnelsen i stedet for å legge det til som en redningsaksjon
- Hold mørke gradienter litt løftet i stedet for å gli helt ned til ren svart
- Kontroller på en telefon etter opplasting, ikke bare på designskjermen din

Hver Mark i Gradiently tegnes direkte i størrelsen du designer i, med kornet som en del av oppskriften, og design laget med en Mark du har sikret deg, eksporteres som PNG eller JPEG i opptil tre ganger designets størrelse, så en gradient aldri må strekkes fra et lite bilde.

## FAQ

### Hva er banding i gradienter?

Banding i gradienter er synlige striper eller trinn i en gradient som skulle sett jevn ut, og skyldes at det er for få tilgjengelige nyanser mellom fargene.

### Hvorfor får mørke gradienter mer banding?

Mørke overganger spenner ofte over bare noen få verdier per kanal, og folk legger lett merke til små forskjeller mellom mørke toner, så hvert trinn blir bredt og synlig.

### Løser støy banding?

Som regel, ja. Fin støy eller dithering sprer pikslene mellom nabonyanser, så øyet ikke ser kantene mellom trinnene.

### Hvilket filformat er best for gradienter?

PNG til grafikk og JPEG i høy kvalitet til fotografiske bilder. Unngå GIF og PNG-8, som bare beholder 256 farger.

### Hvorfor får gradienten min banding etter opplasting til sosiale medier?

Plattformer komprimerer bilder og video på nytt. Legg til korn, last opp i anbefalt størrelse og eksporter i høy kvalitet, så koderen har detaljer å beholde.