# Ni feil i gradientdesign som får arbeidet til å se billig ut

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

De fleste gradienter som ser billige ut, svikter på én av ni forutsigbare måter. Her er hver feil, hva som forårsaker den, og den konkrete endringen som løser den.

## The short version

- De fleste feil i gradientdesign har en håndfull årsaker: farger som går gjennom grått, for mange stopp, synlig banding, svak tekstkontrast og urørte forhåndsinnstillinger.
- En gradient mellom to motsatte fargetoner blir ofte grå på midten i sRGB, noe du kan løse med et stopp på midten eller interpolering i OKLCH.
- Banding vises som synlige striper i langsomme, mørke eller diskrete gradienter, og et lett lag med korn eller dithering skjuler det som regel.
- Tekst på en gradient må ha kontrasten sjekket på sitt verste punkt, ikke sitt beste, fordi bakgrunnen endrer seg under hver bokstav.
- En gradient ser påkostet ut når den har en tydelig struktur, tre til fem beslektede farger, konsekvent tekstur og en grunn til å finnes.

De vanligste **feilene i gradientdesign** er grå, grumsete midter, for mange farger, synlig banding, tekst som forsvinner, harde stopp, regnbueoverdose, korn som ikke stemmer, urørte forhåndsinnstillinger og et uttrykk som er identisk med alle andres. Hver av dem har en bestemt årsak og en bestemt løsning. Ingen krever et nytt verktøy, bare et nærmere blikk på hva overgangen gjør mellom stoppene.

Denne guiden tar de ni i den rekkefølgen du som regel møter dem, fra fargematematikken og opp til identiteten. Vil du ha det grunnleggende først, kan du lese [hva en gradient er](https://gradiently.design/nb/guide/what-is-a-gradient).

## Feil 1: en grå, grumsete midte

Bland to farger fra hver sin side av fargesirkelen, som blått og oransje, og midtpunktet i sRGB blir en matt gråbrun. Nettleseren tar gjennomsnittet av den røde, grønne og blå kanalen, og gjennomsnittet av to komplementærfarger ligger nær nøytralt. Resultatet ser ut som en flekk mellom to gode farger.

- Før: rett fra blått til rav: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Etter: via et midtpunkt i magenta: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Etter: interpolert i OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

De samme to endene, tre resultater. Et stopp på midten eller interpolering i OKLCH holder midten mettet.

Løs det ved å føre overgangen gjennom en farge som ligger mellom de to på sirkelen, eller ved å interpolere i et perseptuelt fargerom. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) går gjennom begge metodene, og [OKLCH i CSS](https://gradiently.design/nb/guide/css-gradient-oklch) forklarer syntaksen.

## Feil 2: for mange farger

Hver farge du legger til, er én overgang til som øyet må lese. Med mer enn fire eller fem stopp slutter en gradient å leses som lys som faller over en flate, og begynner å leses som et stripediagram. Den blir også umulig å gjenskape likt to ganger.

- Sju stopp: urolig: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Tre beslektede stopp: rolig: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Tre beslektede farger gir mer dybde enn sju som ikke hører sammen.

Velg én fargefamilie, legg til en lysere og en mørkere slektning, og tillat høyst én aksent. Tilnærmingen med [analoge farger](https://gradiently.design/nb/guide/analogous-colors) er det tryggeste utgangspunktet.

## Feil 3: striper av banding

Banding er trappen av synlige trinn du ser i en langsom gradient, særlig en mørk. En 8-biters kanal har 256 nivåer, og når en overgang beveger seg et kort stykke i farge over et bredt område, blir hvert nivå et bånd på flere piksler. Kraftig JPEG-komprimering gjør det verre.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Et fint støylag med rundt 8 % opasitet bryter opp båndene uten å se skittent ut.

Korn fungerer fordi det sprer pikslene over nabonivåer, så kanten mellom to bånd forsvinner. Eksporter som PNG eller JPEG i høy kvalitet. [Banding i gradienter](https://gradiently.design/nb/guide/gradient-banding) går gjennom eksportinnstillingene i detalj.

## Feil 4: tekst som forsvinner på gradienten

En gradient endrer seg under hver bokstav. Hvit skrift kan leses vakkert på den mørke enden av en overgang og forsvinne på den lyse enden av samme linje. Designere sjekker overskriften der den ser best ut, og leserne møter den der den ser verst ut.

Et stående innlegg med en overskrift satt rett på en urolig gradient, der noen bokstaver mister kontrast

Bakgrunnen går rett gjennom ordene, så noen bokstaver står på lys farge.

Det samme stående innlegget der gradienten faller til ro i et rolig, mørkere område bak overskriften

Det samme designet med den rolige delen av feltet flyttet bak teksten.

Sjekk kontrasten på det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. WCAG krever 4,5:1 for brødtekst og 3:1 for stor tekst; [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer tallene, og [tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) går gjennom plasseringen.

## Feil 5: harde stopp ved et uhell

Når to stopp ligger noen få prosent fra hverandre, smeller overgangen fra én farge til den neste og tegner en linje ingen ba om. Harde stopp er nyttige med vilje, til striper og diagrammer, men en tilfeldig søm leses som en feil.

- Stopp med 8 % avstand: en synlig søm: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Spredte stopp: et mykt fall av lys: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

La hver overgang få ordentlig plass i feltet.

## Feil 6: regnbueoverdose

Et fullt spekter er det mest høylytte en gradient kan gjøre, og det sier sjelden noe om merkevaren som bruker det. Det bærer også assosiasjonene til hver eneste fargetone på én gang. Vil du ha en regnbue, bruker du en kort bue av den og styrer lysheten. [Regnbuegradienter](https://gradiently.design/nb/guide/rainbow-gradient) viser smakfulle versjoner.

## Feil 7: korn som ikke stemmer

### Unngå

- Grovt korn på innlegget, fint korn på historien, ingenting på lysbildene
- Korn lagt over tekst og logoer
- Korn så kraftig at det leses som en skitten linse
- Å skalere opp en korntekstur så hvert korn blir en klump

### Gjør

- Én kornstørrelse og styrke for alle formater
- Korn bare på bakgrunnslaget
- Akkurat nok til å bryte banding og gi struktur
- Korn generert i eksportstørrelsen, ikke strukket

Tekstur er en del av et uttrykk, så ujevnt korn får et sett med design til å føles som om det kom fra tre steder. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) går gjennom hvor mye du bør bruke.

## Feil 8: å levere forhåndsinnstillingen urørt

De fleste verktøy tilbyr de samme tofargede overgangene i 135 grader. De ser greie ut, og det er derfor de er overalt. En forhåndsinnstilling er et utgangspunkt: flytt én farge, legg til et tredje stopp, endre retningen så den passer layouten, og legg til et materiale. [Å bruke en gradientgenerator](https://gradiently.design/nb/guide/gradient-generator) går gjennom de endringene.

## Feil 9: å se ut som alle andre

Den siste feilen er den dyre. En gradient som er godt laget, men i ånden identisk med alle konkurrentenes, gjør ingen jobb for gjenkjennelsen. Løsningen er konsekvens pluss noe som er vanskelig å kopiere, som et materiale, en måte å bevege seg på eller en måte å gi plass til ord på. [Gradient i merkevarebygging](https://gradiently.design/nb/guide/gradient-branding) forklarer hvordan du eier en.

| Feil | Rask løsning |
| --- | --- |
| Grå midte | Stopp på midten eller interpolering i OKLCH |
| For mange farger | Én fargefamilie pluss én aksent |
| Banding | Fint korn, PNG eller eksport i høy kvalitet |
| Uleselig tekst | Sjekk kontrasten på det verste punktet |
| Harde stopp | Spre stoppene, med mindre kanten er tilsiktet |
| Regnbueoverdose | Bruk en kort bue av spekteret |
| Korn som ikke stemmer | Én kornoppskrift for alle formater |
| Urørt forhåndsinnstilling | Endre farge, stopp, retning og tekstur |
| Lik alle andre | Legg til et materiale og hold det konsekvent |

De ni løsningene på én side.

## FAQ

### Hvorfor ser gradienten min grå ut på midten?

Farger fra hver sin side av sirkelen får et nesten nøytralt gjennomsnitt i sRGB. Legg til et stopp på midten i en fargetone mellom dem, eller interpoler i OKLCH.

### Hvordan stopper jeg banding i en gradient?

Legg til et fint lag med støy eller korn med lav opasitet, unngå kraftig JPEG-komprimering, og gi mørke gradienter et bredere spenn i lyshet å bevege seg gjennom.

### Hvor mange farger bør en gradient ha?

Som regel to til fire beslektede farger, med høyst én aksent. Med mer enn fem stopp begynner de fleste gradienter å se urolige ut.

### Hvordan gjør jeg tekst leselig på en gradient?

Plasser teksten over den roligste delen av feltet, og sjekk kontrasten der bakgrunnen ligger nærmest teksten i lyshet. Sikt mot 4,5:1 for brødtekst og 3:1 for stor tekst.

### Er forhåndsinnstilte gradienter dårlige?

Nei, men de deles av mange. Behandle en forhåndsinnstilling som et utgangspunkt, og endre farger, stopp, retning og tekstur før du bruker den.