# Uskarpe gradienter: myk, ufokusert farge som føles moderne

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

Uskarpe gradienter ser ut som farge sett gjennom frostet glass eller en ufokusert linse. De er rolige, moderne og lette å lage dårlig. Her er metoden, med tallene.

## The short version

- En uskarp gradient lages ved å plassere noen få myke fargeformer på en bunn og gjøre dem uskarpe til ingen kanter er igjen.
- Uskarpe gradienter skiller seg fra nordlysgradienter: nordlys er lysbånd på en mørk himmel, mens en uskarp gradient er diffus farge uten retning eller struktur.
- Uskarphetsradien bør være stor i forhold til lerretet, omtrent 10 til 20 prosent av den korteste siden, ellers leses formene fortsatt som klatter.
- Tre til fire farger som ligger nær hverandre på fargesirkelen blander seg rent; motsatte farger blir grå der de overlapper.
- Glatt, uskarp farge får lett striper, så et fint kornlag bør legges over før eksport.

En **uskarp gradient** er farge uten kanter: noen få myke former på en bunn, gjort uskarpe til alt som er igjen er lys som glir fra én fargetone til den neste. Den ser ut som et fotografi tatt gjennom frostet glass, eller en linse trukket ut av fokus mot en opplyst by. Den mykheten er grunnen til at den passer velværeapper, musikk, hudpleie, rolig teknologi og bakgrunnsbilder. Metoden er enkel: former først, så mye uskarphet, så korn. Detaljene nedenfor er forskjellen mellom drømmende og utgnidd.

## Uskarpe gradienter mot nordlys- og mesh-gradienter

Disse tre blandes sammen fordi alle ser myke ut. De kommer fra ulike ideer, og å velge riktig endrer oppdraget.

| Stil | Hvordan den ser ut | Bygget av |
| --- | --- | --- |
| Uskarp gradient | Diffus farge, uten retning, som mykt fokus | Former på en bunn, kraftig uskarpe |
| [Nordlysgradient](https://gradiently.design/nb/guide/aurora-gradients) | Bånd eller gardiner av lys på en mørk himmel | Strukne striper med tydelig flyt |
| [Mesh-gradient](https://gradiently.design/nb/guide/mesh-gradients) | Glatte fargefelt koblet sammen i et rutenett | Fargepunkter blandet over et nett |
| Lineær gradient | En rett overgang fra én farge til en annen | Stopp langs en linje |

En uskarp gradient har ingen struktur å følge. Ser du en retning eller en form, er det noe annet.

## Slik lager du en uskarp gradient

1. **Velg en bunn** En blek, brukket hvit for luftig, et dypt blekk for glødende. Bunnen fyller alle hull formene etterlater.
2. **Velg tre eller fire nabofarger** Farger nær hverandre på sirkelen, som rosa, syrin og himmelblå, blander seg til rene mellomtoner. Les [analoge farger](https://gradiently.design/nb/guide/analogous-colors) for flere kombinasjoner.
3. **Tegn store, overlappende former** Tre til fem sirkler eller ovaler, som hver dekker en fjerdedel til halvparten av lerretet. La noen gå ut over kantene.
4. **Gjør det kraftig uskarpt** Bruk gaussisk uskarphet på omtrent 10 til 20 prosent av lerretets korteste side. På et innlegg som er 1080 piksler bredt, er det rundt 110 til 220 piksler.
5. **Legg til korn** Et fint støylag på 3 til 6 prosent opasitet skjuler striper og hindrer resultatet i å se plastaktig ut.
6. **Sjekk i telefonstørrelse** Krymp det. Har en form fortsatt en synlig kant, gjør den mer uskarp eller større.

## Fargeoppskrifter for uskarpe gradienter

Hver fargeprøve etterligner det ferdige uttrykket i én enkelt gradient, så du kan kopiere den rett inn i CSS eller bruke fargene som formene dine. Elliptiske radiale gradienter med plassering utenfor midten kommer overraskende nær ekte uskarphet.

- Morgendis: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Ferskenblomst: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Mintetåke: `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%)`
- Klubblys: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Uskarpt lin: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Tre bleke og tre mørke. Bleke uskarpe gradienter føles luftige og redaksjonelle; mørke føles som lys sett ute av fokus om natten.

Velg familie etter hva som skal ligge oppå. Bleke uskarpe gradienter bærer mørk tekst godt og passer hudpleie, papirvarer, velvære og redaksjonelle forsider. Mørke får lys tekst til å gløde og passer uteliv, musikk og sene arrangementer. En nøytral variant som lin fungerer som en stille bakgrunn for produktbilder, der fargen aldri skal konkurrere med gjenstanden. For flere myke paletter, se [drømmende gradienter](https://gradiently.design/nb/guide/dreamy-gradients).

## Hvor mye uskarphet en uskarp gradient trenger

De fleste uskarpe gradienter feiler ved å ikke være uskarpe nok. En form gjort uskarp med 30 piksler på et lerret på 1080 piksler er fortsatt en form med myk kant, og den leses som en klatt. Uttrykket krever at uskarpheten er stor nok til at du ikke kan se hvor én form slutter.

| Lerret | Størrelse | Uskarphet å starte med |
| --- | --- | --- |
| Instagram-innlegg | 1080×1350 | 110 til 220 px |
| Story eller bakgrunnsbilde på telefon | 1080×1920 | 110 til 220 px |
| Toppbilde på nettside | 1920×1080 | 110 til 220 px |
| YouTube-miniatyrbilde | 1280×720 | 70 til 145 px |
| A4-plakat ved 300 dpi | 2480×3508 | 250 til 500 px |

Utgangspunkt på 10 til 20 prosent av den korteste siden. Større former trenger mindre uskarphet; mindre former trenger mer.

## En uskarp gradient i CSS

På nettet har du to veier. Lagdelte radiale gradienter som tones ut til gjennomsiktig er billige og tegnes umiddelbart. Ekte uskarpe elementer ser mykere ut og kan drive, men koster mer å tegne. Til en statisk bakgrunn er lag som regel nok.

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

Vei 1 er en myk, statisk morgendis. Vei 2 bruker tre uskarpe sirkler du kan flytte sakte med transform.

Trenger du et frostet panel over en uskarp bakgrunn i stedet for selve bakgrunnen, er det `backdrop-filter`, dekket i [backdrop-filter i CSS](https://gradiently.design/nb/guide/css-blur-background).

## Hvorfor uskarpe gradienter ser billige ut, og løsningen

### Utgnidd

- Formene synes fortsatt som myke klatter
- Komplementærfarger som blir grå der de overlapper
- Jevn, sentrert komposisjon
- Helt glatt, med striper i overgangene
- Ord plassert over det mest mettede feltet

### Drømmende

- Uskarphet så bred at ingen kant overlever
- Nabofarger som blander seg til rene mellomtoner
- Én dominerende fargemasse, utenfor midten
- Fint korn over alt
- Ord på det blekeste eller dypeste området

Striper er det som tar alle, fordi uskarphet skaper lange, milde overganger over mange piksler. Litt korn fikser det; [striper i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer hvorfor. Og møtes to av fargene dine i grått, bytt den ene med en nabo, som beskrevet i [gjørmete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

En loddrett story med ordene Pust inn på en myk, blek og uskarp bakgrunn i rosa og syrin

En story i 1080×1920 for en meditasjonsapp. Myk farge, korte ord, ingenting med kant.

Gradientlys Marks inkluderer myke, diffuse materialer med innebygd korn, og de holder området bak ordene dine rolig, så et uskarpt uttrykk aldri sluker overskriften. Du kan designe gratis med en hvilken som helst ledig Mark i Studioet.

## FAQ

### Hvordan lager jeg en uskarp gradient?

Plasser tre til fem store former i nabofarger på en ensfarget bunn, bruk en kraftig gaussisk uskarphet på omtrent 10 til 20 prosent av lerretets korteste side, og legg så til et lett kornlag.

### Hva er forskjellen på en uskarp gradient og en nordlysgradient?

En nordlysgradient har lysbånd med tydelig flyt, vanligvis på en mørk himmel. En uskarp gradient er diffus farge uten retning eller synlig struktur.

### Kan jeg lage en uskarp gradient bare med CSS?

Ja. Legg flere radiale gradienter som tones ut til gjennomsiktig i lag, eller gjør absolutt plasserte sirkler uskarpe med `filter: blur()`.

### Hvorfor har den uskarpe gradienten min striper?

Lange, milde overganger har få ulike fargetrinn, så de viser striper. Legg til fint korn og eksporter PNG i stedet for komprimert JPEG.