# Slik lager du en pen gradient: sju sjekkpunkter

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

De fleste dårlige gradienter svikter på de samme punktene. Kjør enhver blanding gjennom disse sju sjekkene i rekkefølge, så vet du hva som må endres før andre ser den.

## The short version

- En gradient ser bra ut når fargene møtes uten å bli grå, stoppene ligger ujevnt og lyset ser ut til å komme fra ett sted.
- Grå eller grumsete midtpartier oppstår når motsatte farger blandes direkte. En brofarge eller blanding i OKLCH løser det.
- Litt korn, rundt 2 til 6 prosent opasitet, skjuler bånd og får en digital gradient til å føles som en overflate.
- En god gradient gir alltid plass til et rolig område der ord får sterk kontrast.
- Eksporter gradienter som PNG eller video med høy kvalitet fremfor komprimert JPEG, som lager synlige striper.

Å vite hvordan du lager en pen gradient, handler om sju sjekker i rekkefølge: farger som møtes uten å bli grå, ujevnt plasserte stopp, lys fra én retning, en grunnfarge som setter stemningen, litt korn, rolig plass til ord og en eksport som bevarer jevnheten. Hver er en rask test med en tydelig løsning. Nesten alle gradienter som virker billige, svikter på minst to punkter. Å rette de to gjør vanligvis mer enn å bytte alle fargene.

| Sjekk | Testen | Hvis den svikter |
| --- | --- | --- |
| 1. Ren midte | Er midtpunktet grått eller brunt? | Legg til en brofarge eller bland i OKLCH |
| 2. Ujevne stopp | Har alle fargene samme bredde? | Gi én farge mesteparten av plassen |
| 3. Ett lys | Kan du peke på hvor lyset kommer fra? | Lysne én side eller ett hjørne |
| 4. En grunnfarge | Er den tydelig mørk eller tydelig lys? | Gjør bunnen mørkere eller lysere |
| 5. Korn | Ser du striper? | Legg til 2 til 6 prosent støy |
| 6. Plass til ord | Kan teksten leses overalt? | Ro ned området bak den |
| 7. Eksport | Tåler den opplasting? | PNG til stillbilder, høy bitrate til video |

Hele sjekken på én side. Følg den ovenfra og ned; senere løsninger avhenger av de tidligere.

## 1. Farger som møtes rent

Når to farger på hver sin side av fargesirkelen blandes direkte, blir midten grå. Blått til oransje og grønt til rosa er vanlige syndere. Legg til en brofarge mellom dem så blandingen går rundt sirkelen fremfor gjennom sentrum, eller bland i et perseptuelt fargerom. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) og [gradientinterpolasjon](https://gradiently.design/nb/guide/gradient-interpolation) forklarer begge.

- Svikter: grå midte: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Består: magenta som bro: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Består: blandet i OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

De samme to fargene på tre måter. En bro eller en perseptuell blanding holder midten levende.

## 2. Ujevnt plasserte stopp

Jevnt fordelte farger virker som en forhåndsinnstilling. I naturen dominerer vanligvis én farge, og endringen skjer over et kort stykke: himmelen er mest blå med et smalt varmt bånd ved horisonten. Gi hovedfargen 60 til 70 prosent av bildet, og la de andre komme sent. [Fargestopp i gradienter](https://gradiently.design/nb/guide/gradient-stops) går grundigere inn i plassering og hint.

- Like tredeler: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Vektet mot toppen: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

De samme tre fargene. Den vektede versjonen har stemning; den jevne har en formel.

## 3. Lys fra én retning

En god gradient føles belyst. Velg hvor lyset kommer fra, vanligvis et øvre hjørne, og gjør det området lysest og mest mettet. Alt annet avtar derfra. Hvis du ikke kan peke på lyskilden, føles gradienten flat uansett farger. En myk [radiell gradient](https://gradiently.design/nb/guide/radial-gradient) over en lineær er den raskeste måten å legge til lys på.

## 4. En grunnfarge som setter stemningen

Bestem om designet er mørkt eller lyst, og gjennomfør det. En gradient som vandrer fra mellomfiolett til mellomrosa, mangler en tydelig bunn og virker ubesluttsom. En nesten svart bunn får fargene til å gløde; en varm offwhite gjør at de føles trykt. Skyv bunnen lenger enn det virker behagelig, og trekk den så ett trinn tilbake.

- Ingen grunnfarge: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Mørk bunn, lyst hjørne: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Lys bunn, lyst hjørne: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Sjekk 3 og 4 sammen. En tydelig bunn og ett lys gjør en forhåndsinnstilling til en scene.

## 5. Korn: riktig mengde støy

Helt jevne digitale gradienter viser striper på mange skjermer og ligner programvarens standardvalg. Et fint støylag løser begge deler. Det nyttige intervallet er smalt: under omtrent 2 prosent opasitet ser du det ikke, og over omtrent 8 prosent fremstår det som bevisst tekstur fremfor finish. På mørke gradienter begynner du med 3 prosent; på lyse med 5 prosent, fordi støy er vanskeligere å se på lyse farger.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Et gjentakende SVG-støylag på 4 prosent. Øk eller senk opasiteten ett trinn om gangen mens du følger med på det mørkeste området.

Flere kornoppskrifter finnes i [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) og [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture).

## 6. Rolig plass til ord

De fleste gradienter skal bære et budskap. Finn hvor ordene skal stå, og sørg for at området er roligst og jevnest i tone, så hver linje har samme kontrast. Den lyseste og travleste delen hører hjemme et annet sted. Rett aldri dårlig kontrast med glød bak bokstavene: flytt heller lyset.

Et salgsinnlegg der deler av overskriften ligger på et lyst felt i gradienten og mister kontrast

Svikter på sjekk 6: fargen går rett gjennom ordene.

Det samme salgsinnlegget med et roligere, jevnt område bak overskriften så alle ordene er tydelige

Består: området bak teksten er roligere, og alle linjene kan leses.

Denne sjekken gjør Gradiently for deg. En Mark vet hvor ordene dine er: det roligste området flytter seg bak teksten, farger nær bokstavene mørkner eller lysner, og Auto-tekstfarge velger lys eller mørk skrift for hver linje fra Markens egen palett.

## 7. Eksport som bevarer jevnheten

- **Stillbilder:** eksporter PNG. JPEG-komprimering gjør lange overganger til trinn, og sosiale apper komprimerer på nytt ved opplasting.
- **Video:** bruk MP4 med høy bitrate i plattformens nøyaktige størrelse, så ingenting skaleres om.
- **Størrelse:** eksporter i plattformens egne mål, som 1080×1350 til et Instagram-innlegg, fremfor å la appen beskjære.
- **Sjekk på mobilen:** se på den opplastede versjonen i et mørkt rom med full lysstyrke. Det er der båndene skjuler seg.

Hvis stripene fortsatt er synlige, har [bånddannelse i gradienter](https://gradiently.design/nb/guide/gradient-banding) grundigere løsninger.

## FAQ

### Hvordan får jeg en gradient til å se bra ut?

Bruk farger som blandes uten å bli grå, plasser stoppene ujevnt, lyssett fra én retning, velg en tydelig mørk eller lys bunn, legg til litt korn og gi ordene et rolig område.

### Hvor mye støy bør jeg legge til en gradient?

Vanligvis 2 til 6 prosent opasitet. Begynn rundt 3 prosent på mørke gradienter og 5 prosent på lyse, og stopp så snart stripene forsvinner.

### Hvorfor er gradienten min grumsete?

To motsatte farger blandes gjennom grått. Legg til en brofarge mellom dem eller bland i OKLCH.

### Hvorfor virker gradienten min billig?

Den har antakelig to jevnt fordelte farger i 45 graders vinkel uten korn. Dette er standardvalg i de fleste verktøy og virker derfor lite gjennomtenkt.

### Hvilket filformat er best for gradienter?

PNG til stillbilder og MP4 med høy bitrate til video. Komprimert JPEG viser bånd i lange, jevne overganger.