# Därför har din gradient ränder, och så åtgärdar du bandning

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

Du gjorde en jämn gradient och den blev randig. Det är bandning, och den har en enkel orsak och en handfull pålitliga lösningar. Här är räkneexemplet, sedan botemedlen.

## The short version

- Gradientbandning är att synliga ränder eller steg uppstår i det som borde vara en jämn färgövergång.
- Bandning uppstår eftersom de flesta bilder bara lagrar 256 nivåer per färgkanal, så en subtil övergång över en stor yta måste hoppa mellan ett litet antal nyanser.
- Bandningen är värst i mörka gradienter, subtila gradienter, stora gradienter och hårt komprimerade bilder eller videor.
- Att lägga till ett fint korn eller dither är den mest pålitliga lösningen, eftersom slumpmässig variation döljer kanterna mellan stegen.
- Export i hög kvalitet, att undvika format med 256 färger som GIF och att vidga övergångens färgomfång minskar bandningen ytterligare.

**Gradientbandning** är när en jämn gradient visar synliga ränder eller steg i stället för en sammanhängande övergång. Det beror på att digitala bilder bara kan lagra ett begränsat antal nyanser per färg, vanligtvis 256 per kanal, och när en gradient ändras långsamt över en bred yta måste varje nyans täcka ett band av pixlar. Ditt öga är mycket bra på att upptäcka kanter, så det plockar ut de banden. Lösningen är oftast att lägga till ett fint korn, exportera med mindre komprimering eller ge övergången mer färg att arbeta med.

## Vad som orsakar gradientbandning

De flesta bilder använder 8 bitar per kanal: 256 möjliga värden för var och en av röd, grön och blå. Det låter som gott och väl, och för en kraftig gradient är det det. Problemet börjar när färgerna i varje ände ligger nära varandra.

Ta en grå gradient från `#202020` till `#303030` över en skärm som är 1920 pixlar bred. Varje kanal går bara från 32 till 48, alltså 16 steg. Gradienten innehåller alltså 16 skilda nyanser, var och en ungefär 120 pixlar bred. Ingen programvara kan göra den jämnare, eftersom det inte finns några nyanser emellan att använda.

- Bandad: åtta synliga steg: `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%)`
- Avsedd: en jämn övergång: `linear-gradient(90deg, #1e1b4b 0%, #332a7c 100%)`

Den första rutan överdriver bandningen med åtta hårda steg så att du kan se den på vilken skärm som helst. Verklig bandning ser ut som de mjuka ränder du får när en mörk, subtil övergång som den andra sträcks ut brett eller komprimeras.

## Var bandningen syns mest

| Situation | Varför det bandar |
| --- | --- |
| Mörka gradienter | Människor ser små skillnader mellan mörka toner lätt, och mörka övergångar spänner ofta över bara några få värden |
| Subtila övergångar med låg kontrast | Få steg mellan ändfärgerna, så varje band blir brett |
| Stora ytor | Samma antal steg utspridda över fler pixlar ger bredare band |
| JPEG och uppladdningar till sociala medier | Komprimering förenklar jämna ytor till platta block |
| Video | Strömningskodekar och 8-bitars video plattar till milda toningar, särskilt i mörka scener |
| GIF och PNG-8 | Bara 256 färger i hela bilden, för alla kanaler tillsammans |

En mörk, subtil gradient i helskärm som laddas upp som en komprimerad JPEG träffar nästan varje rad på en gång.

Därför behöver [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) och [norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients) mest omsorg. Deras skönhet beror på långa, milda toningar genom mörka toner, vilket är exakt receptet för bandning.

## Så åtgärdar du gradientbandning

1. **Lägg till korn eller dither** Ett fint lager slumpmässigt brus sprider pixlar mellan angränsande nyanser, så att ögat inte längre kan hitta kanterna. Det är den mest pålitliga lösningen, och den får också ytan att se rikare ut. Se [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients).
2. **Ge övergången större omfång** Större skillnader i ljushet eller nyans mellan ändfärgerna betyder fler tillgängliga steg och smalare band. En gradient som också förskjuter nyansen lite använder fler kombinationer av rött, grönt och blått än en ren ljushetsskala.
3. **Arbeta i 16 bitar där du kan** Bildredigerare som stöder 16 bitar per kanal behåller många fler nivåer medan du arbetar. Konvertera till 8 bitar först vid exporten, med dithering påslagen.
4. **Exportera i hög kvalitet** Använd PNG för platt grafik, eller JPEG med hög kvalitetsinställning för fotografiska bilder. Undvik GIF och PNG-8, som bara behåller 256 färger totalt.
5. **Exportera i slutlig storlek** Att förstora en liten gradientbild sträcker ut dess band. Rendera eller exportera i exakt storlek, eller större, i stället för att skala upp.

> **Din skärm kan vara en del av det** Vissa skärmar visar färre nyanser än filen innehåller, och webbläsare skiljer sig åt i om de ditherar gradienter. Kontrollera viktigt arbete på mer än en skärm, inklusive en telefon på full ljusstyrka.

## Åtgärda bandning i CSS-gradienter

Webbläsare renderar CSS-gradienter live, så det finns ingen exportinställning att ändra. Två saker hjälper. Först, vidga skalan eller lägg till ett nyansskifte. Sedan, lägg ett subtilt brusskikt över gradienten, vilket fungerar precis som korn i en bild. [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) visar lätta sätt att göra det lagret utan stora bildfiler.

### Bandar

- `linear-gradient(#0b0b12, #14141f)` över en hel skärm
- En enda nyans från nästan svart till något mindre svart
- Ingen textur över ytan

### Håller

- `linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)` med större omfång
- En mörk skala som också glider från grått mot indigo
- Ett fint brusskikt med låg opacitet ovanpå

## Åtgärda bandning i video och uppladdningar till sociala medier

Sociala plattformar komprimerar om det du laddar upp, och videokodekar är gjorda för att kasta bort exakt den sortens subtila detaljer som håller gradienter jämna. Korn hjälper dubbelt här: det döljer stegen, och det ger kodaren verkliga detaljer att behålla. Ladda upp i plattformens rekommenderade storlek så att den inte skalas om igen, och exportera video med en generös kvalitetsinställning. Om du kodar med ffmpeg har x264 en inställning som är trimmad för att bevara 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
```

Lägre `-crf` betyder högre kvalitet. `-tune grain` säger åt kodaren att behålla brus i stället för att jämna ut det.

Loopande videobakgrunder är särskilt utsatta för det här, eftersom de oftast är mörka och långsamma. [Sömlösa loopvideor](https://gradiently.design/sv/guide/seamless-loop-video) tar upp resten av exporten.

## Förebygga bandning från början

- Välj gradienter med tillräcklig ljushets- eller nyansförändring för sin storlek
- Planera för korn från början i stället för att lägga till det som en räddningsaktion
- Håll mörka gradienter lite lyfta i stället för att låta dem glida hela vägen till rent svart
- Kontrollera på en telefon efter uppladdningen, inte bara på din designskärm

Varje Mark i Gradiently renderas live i den storlek du designar i, med sitt korn som en del av receptet, och designer som görs med en säkrad Mark exporteras som PNG eller JPEG upp till tre gånger designens storlek, så en gradient behöver aldrig sträckas ut från en liten bild.

## FAQ

### Vad är gradientbandning?

Gradientbandning är synliga ränder eller steg i en gradient som borde se jämn ut, orsakade av för få tillgängliga nyanser mellan dess färger.

### Varför bandar mörka gradienter mer?

Mörka övergångar spänner ofta över bara några få värden per kanal, och människor märker små skillnader mellan mörka toner lätt, så varje steg blir brett och synligt.

### Åtgärdar brus bandning?

Oftast ja. Fint brus eller dither sprider pixlar mellan angränsande nyanser, så att ögat inte ser kanterna mellan stegen.

### Vilket filformat är bäst för gradienter?

PNG för grafik och JPEG i hög kvalitet för fotografiska bilder. Undvik GIF och PNG-8, som bara behåller 256 färger.

### Varför bandar min gradient efter uppladdning till sociala medier?

Plattformar komprimerar om bilder och video. Lägg till korn, ladda upp i rekommenderad storlek och exportera i hög kvalitet för att ge kodaren detaljer att behålla.