# Sådan får du en gradient til at se godt ud: et tjek i syv punkter

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

De fleste dårlige gradienter dumper i de samme få test. Kør en hvilken som helst blanding gennem disse syv tjek i rækkefølge, og du ved præcis, hvad du skal ændre, før nogen andre ser den.

## The short version

- En gradient ser godt ud, når dens farver mødes uden at blive grå, dens stop er ujævnt fordelt, og dens lys ser ud til at komme fra ét sted.
- Grå eller mudrede midter opstår, når to modsatte farver blandes direkte; en brofarve eller blanding i OKLCH løser det.
- En lille smule korn, omkring 2 til 6 procent opacitet, skjuler banding og får en digital gradient til at føles som en overflade.
- En god gradient efterlader altid et roligt område, hvor ord kan stå med stærk kontrast.
- Eksportér gradienter som PNG eller video i høj kvalitet frem for komprimeret JPEG, som skaber synlige striber.

At vide, hvordan du får en gradient til at se godt ud, handler om syv tjek i rækkefølge: farver, der mødes uden at blive grå, stop placeret ujævnt, lys fra én retning, en bund, der sætter stemningen, et strejf af korn, et roligt sted til ord og en eksport, der holder den glat. Hvert er en hurtig test med en klar løsning. Næsten hver gradient, der ser billig ud, dumper i mindst to af dem, og at rette de to gør som regel mere end at skifte farverne helt ud.

| Tjek | Testen | Hvis den dumper |
| --- | --- | --- |
| 1. Ren midte | Er midtpunktet gråt eller brunt? | Tilføj en brofarve, eller bland i OKLCH |
| 2. Ujævne stop | Har hver farve samme bredde? | Giv én farve det meste af pladsen |
| 3. Ét lys | Kan du sige, hvor lyset er? | Gør én side eller ét hjørne lysere |
| 4. En bund | Er den tydeligt mørk eller tydeligt lys? | Skub basen mørkere eller blegere |
| 5. Korn | Kan du se striber? | Tilføj 2 til 6 procent støj |
| 6. Plads til ord | Kan teksten læses overalt? | Gør området bag den roligere |
| 7. Eksport | Overlever den upload? | PNG til stillbilleder, høj bitrate til video |

Hele tjekket på én side. Kør det oppefra og ned; de senere løsninger afhænger af de tidligere.

## 1. Farver, der mødes rent

Når to farver, der står over for hinanden i farvecirklen, blandes direkte, falder midten ned i grå. Blå til orange og grøn til pink er de sædvanlige syndere. Tilføj enten en brofarve imellem dem, så blandingen rejser rundt om cirklen i stedet for gennem centrum, eller bland i et perceptuelt farverum. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) og [interpolation i gradienter](https://gradiently.design/da/guide/gradient-interpolation) forklarer begge dele.

- Dumper: 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 farver på tre måder. En bro eller en perceptuel blanding holder midten i live.

## 2. Stop placeret ujævnt

Jævnt fordelte farver læses som en rampe fra en forudindstilling. I naturen dominerer én farve som regel, og skiftet sker over en kort strækning: en himmel er for det meste blå med et smalt varmt bånd ved horisonten. Giv din hovedfarve 60 til 70 procent af billedet, og lad de andre komme sent. [Farvestop i gradienter](https://gradiently.design/da/guide/gradient-stops) går dybere ind i placering og hints.

- Lige store tredjedele: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Vægtet mod toppen: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

De samme tre farver. Den vægtede udgave har en stemning; den jævne har en formel.

## 3. Lys fra én retning

En god gradient føles belyst. Vælg, hvor lyset kommer fra, som regel et øverste hjørne, og gør det område til det lyseste og mest mættede. Alt andet falder væk fra det. Kan du ikke pege på lyskilden, vil gradienten føles flad, uanset hvilke farver du bruger. En blød [radial gradient](https://gradiently.design/da/guide/radial-gradient) lagt over en lineær er den hurtigste måde at tilføje den på.

## 4. En bund, der sætter stemningen

Bestem, om designet er mørkt eller lyst, og hold fast i det. En gradient, der vandrer fra mellemviolet til mellempink, har ingen bund, så den føles ubeslutsom. En næsten sort base får farverne til at gløde; en varm, brudt hvid får dem til at føles trykte. Skub basen længere, end det føles behageligt, og træk den så ét trin tilbage.

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

Tjek 3 og 4 sammen. En tydelig bund og ét lys gør en forudindstilling til en scene.

## 5. Korn: den rigtige mængde støj

Helt glatte digitale gradienter viser striber på mange skærme, og de ligner softwarens standardindstillinger. Et fint støjlag løser begge dele. Det brugbare spænd er smalt: under cirka 2 procent opacitet kan du ikke se det, og over cirka 8 procent læses det som en bevidst tekstur frem for en finish. Til mørke gradienter starter du ved 3 procent; til blege ved 5 procent, fordi støj er sværere at se på lyse farver.

```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 gentaget SVG-støjlag på 4 procent. Hæv eller sænk opaciteten ét trin ad gangen, mens du holder øje med det mørkeste område.

Flere opskrifter på korn finder du i [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) og [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture).

## 6. Et roligt sted til ord

De fleste gradienter findes for at bære et budskab. Find ud af, hvor ordene skal stå, og sørg for, at det område er det roligste og mest ensartede i tone, så hver linje har samme kontrast. Den lyseste, travleste del af gradienten hører til et andet sted. Ret aldrig dårlig kontrast med en glød bag bogstaverne: flyt lyset i stedet.

Et udsalgsopslag, hvor en del af overskriften står på en lys plet af gradienten og mister kontrast

Dumper i tjek 6: farven løber lige gennem ordene.

Det samme udsalgsopslag med et roligere, jævnt område bag overskriften, så alle ordene kan læses tydeligt

Består: området bag teksten er roligere, og hver linje kan læses.

Det er det tjek, Gradiently laver for dig. En Mark ved, hvor dine ord står: dens roligste område flytter ind bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og Automatisk tekstfarve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet.

## 7. En eksport, der holder den glat

- **Stillbilleder:** eksportér PNG. JPEG-komprimering gør lange overgange til trin, og sociale apps komprimerer igen ved upload.
- **Video:** brug en MP4 med høj bitrate i platformens præcise størrelse, så intet bliver skaleret om.
- **Størrelse:** eksportér i platformens egne mål, som 1080×1350 til et Instagram-opslag, i stedet for at lade appen beskære.
- **Tjek på en telefon:** se på den uploadede udgave, i et mørkt rum, med fuld lysstyrke. Det er dér, banding gemmer sig.

Overlever striberne alt dette, har [banding i gradienter](https://gradiently.design/da/guide/gradient-banding) de dybere løsninger.

## FAQ

### Hvordan får jeg en gradient til at se godt ud?

Brug farver, der blandes uden at blive grå, placér stop ujævnt, belys den fra én retning, vælg en tydelig mørk eller lys bund, tilføj lidt korn, og efterlad et roligt sted til ord.

### Hvor meget støj skal jeg tilføje til en gradient?

Som regel 2 til 6 procent opacitet. Start omkring 3 procent på mørke gradienter og 5 procent på blege, og stop, så snart striberne forsvinder.

### Hvorfor ser min gradient mudret ud?

To modsatte farver blandes gennem grå. Tilføj en brofarve imellem dem, eller bland i OKLCH.

### Hvorfor ser min gradient billig ud?

Den består sandsynligvis af to farver, jævnt fordelt, i en vinkel på 45 grader, uden korn. Det er standardindstillingerne i de fleste værktøjer, så de virker uovervejede.

### Hvilket filformat er bedst til gradienter?

PNG til stillbilleder og MP4 med høj bitrate til video. Komprimeret JPEG viser banding i lange, glatte overgange.