# Så får du en gradient att se bra ut: en kontroll i sju steg

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

De flesta dåliga gradienter faller på samma få tester. Kör vilken blandning som helst genom de här sju kontrollerna, i ordning, så vet du exakt vad du ska ändra innan någon annan ser den.

## The short version

- En gradient ser bra ut när dess färger möts utan att bli grå, dess stopp är ojämnt fördelade och dess ljus verkar komma från ett ställe.
- Gråa eller leriga mitter uppstår när två motsatta färger blandas direkt, och en överbryggande färg eller blandning i OKLCH rättar till det.
- En liten mängd korn, kring 2 till 6 procents opacitet, döljer bandning och får en digital gradient att kännas som en yta.
- En bra gradient lämnar alltid ett lugnt område där ord kan sitta med stark kontrast.
- Exportera gradienter som PNG eller video i hög kvalitet i stället för komprimerad JPEG, som skapar synliga ränder.

Att veta hur man får en gradient att se bra ut handlar om sju kontroller, i ordning: färger som möts utan att bli grå, stopp som placeras ojämnt, ljus som kommer från en riktning, en grund som sätter stämningen, en nypa korn, ett lugnt utrymme för ord och en export som håller den mjuk. Var och en är ett snabbt test med en tydlig åtgärd. Nästan varje gradient som ser billig ut faller på minst två av dem, och att rätta till de två gör oftast mer än att byta färger helt.

| Kontroll | Testet | Om den faller |
| --- | --- | --- |
| 1. Ren mitt | Är mittpunkten grå eller brun? | Lägg till en brofärg eller blanda i OKLCH |
| 2. Ojämna stopp | Är varje färg lika bred? | Ge en färg det mesta av utrymmet |
| 3. Ett ljus | Kan du säga var ljuset är? | Gör en sida eller ett hörn ljusare |
| 4. En grund | Är den tydligt mörk eller tydligt ljus? | Skjut basen mörkare eller blekare |
| 5. Korn | Ser du ränder? | Lägg till 2 till 6 procent brus |
| 6. Plats för ord | Går texten att läsa överallt? | Lugna området bakom den |
| 7. Export | Överlever den uppladdning? | PNG för stillbilder, hög bitrate för video |

Hela kontrollen på en sida. Kör den uppifrån och ner, eftersom senare åtgärder beror på tidigare.

## 1. Färger som möts rent

När två färger mitt emot varandra på hjulet blandas direkt faller mitten ner i grått. Blått till orange och grönt till rosa är de vanliga syndarna. Lägg antingen till en överbryggande färg emellan, så att blandningen färdas runt hjulet i stället för genom centrum, eller blanda i en perceptuell färgrymd. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) och [gradientinterpolering](https://gradiently.design/sv/guide/gradient-interpolation) förklarar båda.

- Faller: grå mitt: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Klarar: magentabro: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Klarar: blandad i OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Samma två färger på tre sätt. En bro eller en perceptuell blandning håller mitten levande.

## 2. Stopp placerade ojämnt

Jämnt fördelade färger läses som en ramp från en förinställning. I naturen dominerar oftast en färg och förändringen sker över en kort sträcka: en himmel är mest blå med ett smalt varmt band vid horisonten. Ge din huvudfärg 60 till 70 procent av bilden och låt de andra komma sent. [Gradientens färgstopp](https://gradiently.design/sv/guide/gradient-stops) går djupare in på placering och mittpunkter.

- Jämna tredjedelar: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Tyngd mot toppen: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Samma tre färger. Den tyngda versionen har en stämning, den jämna har en formel.

## 3. Ljus från en riktning

En bra gradient känns upplyst. Välj varifrån ljuset kommer, oftast ett övre hörn, och gör det området det klaraste och mest mättade. Allt annat faller bort från det. Om du inte kan peka ut ljuskällan känns gradienten platt oavsett vilka färger du använder. En mjuk [radiell gradient](https://gradiently.design/sv/guide/radial-gradient) lagd över en linjär är det snabbaste sättet att lägga till den.

## 4. En grund som sätter stämningen

Bestäm om designen är mörk eller ljus och håll fast vid det. En gradient som irrar från mellanviolett till mellanrosa har ingen grund, så den känns obestämd. En nästan svart bas får färgerna att glöda, ett varmt off-white får dem att kännas tryckta. Skjut basen längre än vad som känns bekvämt och ta sedan tillbaka den ett steg.

- Ingen grund: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Mörk grund, upplyst hörn: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Ljus grund, upplyst hörn: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Kontroll 3 och 4 tillsammans. En tydlig grund och ett ljus gör en förinställning till en scen.

## 5. Korn: rätt brusförhållande

Helt jämna digitala gradienter visar ränder på många skärmar och ser ut som programvarans standardval. Ett fint brusskikt rättar till båda. Det användbara spannet är smalt: under cirka 2 procents opacitet ser du det inte, och över cirka 8 procent läses det som en medveten textur i stället för en finish. För mörka gradienter, börja på 3 procent, för bleka 5 procent, eftersom brus är svårare att se på ljusa färger.

```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;
}
```

Ett upprepande SVG-brusskikt på 4 procent. Höj eller sänk opaciteten i enstaka steg medan du tittar på det mörkaste området.

Fler kornrecept finns i [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) och [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture).

## 6. Ett lugnt utrymme för ord

De flesta gradienter finns för att bära ett budskap. Hitta var orden ska stå och se till att det området är det lugnaste och mest jämna i tonen, så att varje rad har samma kontrast. Den klaraste, stökigaste delen av gradienten hör hemma någon annanstans. Åtgärda aldrig dålig kontrast med ett sken bakom bokstäverna: flytta ljuset i stället.

Ett reainlägg där en del av rubriken sitter på en klar fläck i gradienten och tappar kontrast

Faller på kontroll 6: färgen löper rakt genom orden.

Samma reainlägg med ett lugnare, jämnt område bakom rubriken så att alla ord läses tydligt

Klarar: området bakom texten är lugnare och varje rad går att läsa.

Det här är kontrollen Gradiently gör åt dig. En Mark vet var dina ord finns: dess lugnaste område flyttas bakom texten, färger nära bokstäverna fördjupas eller lyfts och Auto-bläck väljer ljus eller mörk text för varje rad ur Markens egen palett.

## 7. En export som håller den mjuk

- **Stillbilder:** exportera PNG. JPEG-komprimering gör långa toner till steg, och sociala appar komprimerar igen vid uppladdning.
- **Video:** använd MP4 med hög bitrate i plattformens exakta storlek, så att inget skalas om.
- **Storlek:** exportera i plattformens egna mått, som 1080×1350 för ett Instagraminlägg, i stället för att låta appen beskära.
- **Kontrollera i en mobil:** titta på den uppladdade versionen, i ett mörkt rum, med full ljusstyrka. Där gömmer sig bandningen.

Om ränderna överlever allt det här har [gradientbandning](https://gradiently.design/sv/guide/gradient-banding) de djupare åtgärderna.

## FAQ

### Hur får jag en gradient att se bra ut?

Använd färger som blandas utan att bli grå, placera stopp ojämnt, ljussätt den från en riktning, bestäm dig för en mörk eller ljus grund, lägg till lite korn och lämna ett lugnt utrymme för ord.

### Hur mycket brus ska jag lägga på en gradient?

Oftast 2 till 6 procents opacitet. Börja kring 3 procent på mörka gradienter och 5 procent på bleka, och sluta så fort ränderna försvinner.

### Varför ser min gradient lerig ut?

Två motsatta färger blandas genom grått. Lägg till en överbryggande färg emellan eller blanda i OKLCH.

### Varför ser min gradient billig ut?

Den är förmodligen två färger, jämnt fördelade, i 45 graders vinkel och utan korn. Det är standardvalen i de flesta verktyg, så de läses som oövervägda.

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

PNG för stillbilder och MP4 med hög bitrate för video. Komprimerad JPEG visar bandning i långa, mjuka toner.