# Suddiga gradienter: mjukfokusfärg som känns modern

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

Suddiga gradienter ser ut som färg sedd genom frostat glas eller ett objektiv ur fokus. De är lugna, moderna och lätta att göra dåligt. Här är metoden, med siffrorna.

## The short version

- En suddig gradient skapas genom att placera några mjuka färgformer på en botten och sudda dem tills inga kanter återstår.
- Suddiga gradienter skiljer sig från norrskensgradienter: norrsken är band av ljus på en mörk himmel, medan en suddig gradient är diffus färg utan riktning eller struktur.
- Suddradien bör vara stor i förhållande till ytan, ungefär 10 till 20 procent av dess kortare sida, annars läses formerna fortfarande som fläckar.
- Tre till fyra färger som ligger nära varandra på färghjulet suddas rent, medan motsatta färger blir grå där de överlappar.
- Slät suddad färg får lätt ränder, så ett fint kornlager bör läggas överst före export.

En **suddig gradient** är färg utan kanter: några mjuka former på en botten, suddade tills allt som återstår är ljus som glider från en färgton till nästa. Den ser ut som ett fotografi taget genom frostat glas, eller ett objektiv som dragits ur fokus på en upplyst stad. Den mjukheten är därför den passar välmåendeappar, musik, hudvård, lugn teknik och bakgrundsbilder. Metoden är enkel: former först, sedan mycket sudd, sedan korn. Detaljerna nedan är skillnaden mellan drömskt och smetigt.

## Suddiga gradienter jämfört med norrskens- och mesh-gradienter

De här tre blandas ihop eftersom alla ser mjuka ut. De kommer från olika idéer, och att välja rätt ändrar uppdraget.

| Stil | Hur den ser ut | Byggd av |
| --- | --- | --- |
| Suddig gradient | Diffus färg utan riktning, som mjuk fokus | Former på en botten, kraftigt suddade |
| [Norrskensgradient](https://gradiently.design/sv/guide/aurora-gradients) | Band eller ridåer av ljus på en mörk himmel | Utdragna streck med ett tydligt flöde |
| [Mesh-gradient](https://gradiently.design/sv/guide/mesh-gradients) | Släta färgfält sammanfogade i ett rutnät | Färgpunkter blandade över ett nät |
| Linjär gradient | En rak ramp från en färg till en annan | Stopp längs en linje |

En suddig gradient har ingen struktur att följa. Om du kan se en riktning eller en form är det något annat.

## Så gör du en suddig gradient

1. **Välj en botten** Ett blekt off-white för luftigt, ett djupt bläck för glödande. Bottnen fyller varje lucka formerna lämnar.
2. **Välj tre eller fyra närliggande färger** Färger nära varandra på hjulet, som rosa, lila och himmelsblått, blandas till rena mellantoner. Läs [analoga färger](https://gradiently.design/sv/guide/analogous-colors) för fler kombinationer.
3. **Rita stora, överlappande former** Tre till fem cirklar eller ovaler, var och en täcker en fjärdedel till hälften av ytan. Låt några gå utanför kanterna.
4. **Sudda hårt** Lägg på en gaussisk oskärpa på ungefär 10 till 20 procent av ytans kortare sida. På ett inlägg som är 1080 pixlar brett är det omkring 110 till 220 pixlar.
5. **Lägg till korn** Ett fint brusskikt med 3 till 6 procents opacitet döljer ränder och hindrar resultatet från att se plastigt ut.
6. **Kontrollera i telefonstorlek** Förminska den. Om någon form fortfarande har en synlig kant, sudda mer eller gör formen större.

## Färgrecept för suddiga gradienter

Varje färgprov approximerar det färdiga utseendet i en enda gradient, så du kan kopiera det rakt in i CSS eller använda färgerna som dina former. Elliptiska radiella gradienter med förskjutna lägen kommer förvånansvärt nära en riktig suddning.

- Morgondis: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Persikoblom: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Mintdimma: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Nattbokeh: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Klubbljus: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Linnesudd: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Tre bleka och tre mörka. Bleka suddningar känns luftiga och redaktionella, mörka känns som ljus sedda ur fokus på natten.

Välj familj efter vad som ligger ovanpå. Bleka suddningar bär mörk text väl och passar hudvård, brevpapper, välmående och redaktionella omslag. Mörka suddningar får ljus text att glöda och passar nattliv, musik och sena evenemang. En neutral suddning som linne fungerar som en stillsam kuliss för produktbilder, där färgen aldrig ska konkurrera med föremålet. För fler mjuka paletter, se [drömska gradienter](https://gradiently.design/sv/guide/dreamy-gradients).

## Hur mycket sudd en suddig gradient behöver

De flesta suddiga gradienter misslyckas genom att inte vara tillräckligt suddiga. En form suddad med 30 pixlar på en yta som är 1080 pixlar bred är fortfarande en form med mjuk kant, som läses som en fläck. Utseendet kräver att suddet är så stort att du inte kan avgöra var en form slutar.

| Yta | Storlek | Startvärde för sudd |
| --- | --- | --- |
| Instagraminlägg | 1080×1350 | 110 till 220 px |
| Story eller telefonbakgrund | 1080×1920 | 110 till 220 px |
| Webbplatshero | 1920×1080 | 110 till 220 px |
| YouTube-miniatyr | 1280×720 | 70 till 145 px |
| A4-affisch vid 300 dpi | 2480×3508 | 250 till 500 px |

Startpunkter vid 10 till 20 procent av den kortare sidan. Större former behöver mindre sudd, mindre former behöver mer.

## En suddig gradient i CSS

På webben har du två vägar. Lagrade radiella gradienter som tonar ut till transparent är billiga och renderas direkt. Riktiga suddade element ser mjukare ut och kan driva, men kostar mer att rita. För en statisk bakgrund räcker oftast lagren.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

Väg 1 är ett mjukt, statiskt morgondis. Väg 2 använder tre suddade cirklar som du kan flytta långsamt med transform.

Om du behöver en frostad panel över en suddig bakgrund snarare än själva bakgrunden är det `backdrop-filter`, som tas upp i [CSS backdrop filter](https://gradiently.design/sv/guide/css-blur-background).

## Varför suddiga gradienter ser billiga ut, och lösningen

### Smetigt

- Former som fortfarande syns som mjuka fläckar
- Komplementfärger som blir grå i överlappningen
- Jämn, centrerad komposition
- Helt slät, med ränder i övertoningarna
- Ord placerade över den mest mättade fläcken

### Drömskt

- Sudd så brett att ingen kant överlever
- Närliggande färgtoner som blandas till rena mellantoner
- En dominerande färgmassa, förskjuten från mitten
- Fint korn över allt
- Ord på den blekaste eller djupaste ytan

Ränder är det som fångar alla, eftersom ett sudd skapar långa, milda övertoningar över många pixlar. Lite korn löser det. [Gradientränder](https://gradiently.design/sv/guide/gradient-banding) förklarar varför. Och om två av dina färger möts i grått, byt ut en mot en granne, som i [leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

En stående story med orden Andas in på en mjuk, blek, suddig bakgrund i rosa och lila

En story i 1080×1920 för en meditationsapp. Mjuk färg, korta ord, inget med kant.

Gradiently Marks innehåller mjuka, diffusa material med inbyggt korn, och de håller ytan bakom dina ord lugn, så ett suddigt utseende aldrig sväljer rubriken. Du kan designa med valfri osäkrad Mark gratis i Studio.

## FAQ

### Hur gör jag en suddig gradient?

Placera tre till fem stora former i närliggande färger på en enkel botten, lägg på en kraftig gaussisk oskärpa på ungefär 10 till 20 procent av ytans kortare sida och lägg sedan till ett lätt kornlager.

### Vad är skillnaden mellan en suddig gradient och en norrskensgradient?

En norrskensgradient har band av ljus med tydligt flöde, oftast på en mörk himmel. En suddig gradient är diffus färg utan riktning eller synlig struktur.

### Kan jag göra en suddig gradient enbart med CSS?

Ja. Lägg flera radiella gradienter som tonar ut till transparent, eller sudda absolutpositionerade cirklar med `filter: blur()`.

### Varför får min suddiga gradient ränder?

Långa, milda övertoningar har få olika färgsteg, så de visar ränder. Lägg till fint korn och exportera PNG i stället för komprimerad JPEG.