# Blurry gradient: zachte kleurvlakken die modern aanvoelen

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

Blurry gradients lijken kleur door matglas of een lens die uit focus staat. Ze zijn rustig, modern en makkelijk slecht te maken. Hier is de methode, met de getallen.

## The short version

- Een blurry gradient maak je door een paar zachte kleurvormen op een ondergrond te zetten en die te vervagen tot er geen randen meer zijn.
- Een blurry gradient is iets anders dan een aurora gradient: aurora is lint van licht op een donkere hemel, een blurry gradient is diffuse kleur zonder richting of structuur.
- De blurstraal moet groot zijn ten opzichte van het canvas, ongeveer 10 tot 20 procent van de korte zijde, anders blijven de vormen als vlekken zichtbaar.
- Drie of vier kleuren die dicht bij elkaar op het kleurenwiel liggen vervagen netjes; tegenovergestelde kleuren worden grijs waar ze overlappen.
- Vervaagde kleur krijgt makkelijk banden, dus leg voor het exporteren een fijne korrellaag eroverheen.

Een **blurry gradient** is kleur zonder randen: een paar zachte vormen op een ondergrond, vervaagd tot er alleen licht overblijft dat van de ene tint in de andere zweeft. Het ziet eruit als een foto door matglas, of een lens die op een verlichte stad uit focus is getrokken. Die zachtheid maakt hem geschikt voor wellness-apps, muziek, huidverzorging, rustige tech en wallpapers. De methode is eenvoudig: eerst vormen, dan veel blur, dan korrel. De details hieronder maken het verschil tussen dromerig en uitgesmeerd.

## Blurry gradients versus aurora en mesh gradients

Deze drie worden door elkaar gehaald omdat ze er allemaal zacht uitzien. Ze komen uit verschillende ideeën, en de juiste kiezen verandert de opdracht.

| Stijl | Hoe het eruitziet | Opgebouwd uit |
| --- | --- | --- |
| Blurry gradient | Diffuse kleur, geen richting, als zachte focus | Vormen op een ondergrond, zwaar vervaagd |
| [Aurora gradient](https://gradiently.design/nl/guide/aurora-gradients) | Linten of gordijnen van licht op een donkere hemel | Uitgerekte strepen met een duidelijke stroming |
| [Mesh gradient](https://gradiently.design/nl/guide/mesh-gradients) | Zachte kleurvelden verbonden op een raster | Kleurpunten vermengd over een mesh |
| Lineaire gradient | Een rechte overgang van de ene kleur naar de andere | Kleurstops langs een lijn |

Een blurry gradient heeft geen structuur om te volgen. Zie je een richting of een vorm, dan is het iets anders.

## Een blurry gradient maken

1. **Kies een ondergrond** Een licht gebroken wit voor luchtig, een diep inktzwart voor gloeiend. De ondergrond vult elke opening die de vormen laten.
2. **Kies drie of vier verwante kleuren** Kleuren die dicht bij elkaar op het wiel liggen, zoals roze, lila en hemelsblauw, vloeien over in schone tussentinten. Lees [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors) voor meer combinaties.
3. **Teken grote, overlappende vormen** Drie tot vijf cirkels of ovalen, elk een kwart tot de helft van het canvas groot. Laat sommige over de rand lopen.
4. **Vervaag stevig** Gebruik een gaussiaanse blur van ongeveer 10 tot 20 procent van de korte zijde van het canvas. Op een post van 1080 pixels breed is dat zo’n 110 tot 220 pixels.
5. **Voeg korrel toe** Een fijne ruislaag met 3 tot 6 procent dekking verbergt banding en voorkomt dat het resultaat plastic oogt.
6. **Controleer op telefoonformaat** Maak het klein. Heeft een vorm nog een zichtbare rand, vervaag dan meer of maak de vorm groter.

## Kleurrecepten voor blurry gradients

Elk staal benadert de uiteindelijke look in één gradient, dus je kunt hem direct in CSS kopiëren of de kleuren als je vormen gebruiken. Elliptische radiale gradients met verschoven posities komen verrassend dicht bij een echte blur.

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

Drie lichte en drie donkere. Lichte blurs voelen luchtig en redactioneel; donkere blurs voelen als lichten die ’s nachts uit focus staan.

Kies de familie op basis van wat erbovenop komt. Lichte blurs dragen donkere letters goed en passen bij huidverzorging, schrijfwaren, wellness en redactionele covers. Donkere blurs laten lichte letters gloeien en passen bij nachtleven, muziek en late evenementen. Een neutrale blur zoals linnen werkt als rustige achtergrond voor productfoto’s, waar kleur nooit met het object mag concurreren. Voor meer zachte paletten, zie [dromerige gradients](https://gradiently.design/nl/guide/dreamy-gradients).

## Hoeveel blur een blurry gradient nodig heeft

De meeste blurry gradients mislukken doordat ze niet vaag genoeg zijn. Een vorm die op een canvas van 1080 pixels 30 pixels is vervaagd, blijft een vorm met een zachte rand, en dat leest als een vlek. De look vraagt om zoveel blur dat je niet meer kunt zien waar een vorm ophoudt.

| Canvas | Formaat | Startwaarde blur |
| --- | --- | --- |
| Instagram-post | 1080×1350 | 110 tot 220 px |
| Story of telefoonwallpaper | 1080×1920 | 110 tot 220 px |
| Website-hero | 1920×1080 | 110 tot 220 px |
| YouTube-thumbnail | 1280×720 | 70 tot 145 px |
| A4-poster op 300 dpi | 2480×3508 | 250 tot 500 px |

Startpunten op 10 tot 20 procent van de korte zijde. Grotere vormen hebben minder blur nodig; kleinere meer.

## Een blurry gradient in CSS

Op het web heb je twee routes. Gelaagde radiale gradients die naar transparant vervagen zijn goedkoop en verschijnen direct. Echte vervaagde elementen zien er zachter uit en kunnen bewegen, maar kosten meer om te tekenen. Voor een statische achtergrond zijn lagen meestal genoeg.

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

Route 1 is een zachte, statische ochtendnevel. Route 2 gebruikt drie vervaagde cirkels die je traag met transform kunt verplaatsen.

Heb je een matglazen paneel boven een vervaagde achtergrond nodig in plaats van de achtergrond zelf, dan is dat `backdrop-filter`, behandeld in [CSS backdrop filter](https://gradiently.design/nl/guide/css-blur-background).

## Waarom blurry gradients goedkoop ogen, en de oplossing

### Uitgesmeerd

- Vormen zijn nog zichtbaar als zachte vlekken
- Complementaire kleuren die in de overlap grijs worden
- Gelijkmatige, gecentreerde compositie
- Perfect glad, met banding in de overgangen
- Woorden op de meest verzadigde plek

### Dromerig

- Blur zo breed dat geen rand overleeft
- Verwante tinten die in schone tussentinten overlopen
- Eén dominante kleurmassa, uit het midden
- Fijne korrel over alles
- Woorden op het lichtste of diepste gebied

Banding is de valkuil die iedereen raakt, want een blur maakt lange, zachte overgangen over veel pixels. Een beetje korrel lost het op; [gradient banding](https://gradiently.design/nl/guide/gradient-banding) legt uit waarom. En als twee van je kleuren in grijs samenkomen, vervang er dan een door een buurkleur, zoals beschreven in [modderige gradients](https://gradiently.design/nl/guide/muddy-gradients).

Een verticale story met de woorden Adem in op een zachte, lichte, vervaagde roze en lila achtergrond

Een Story van 1080×1920 voor een meditatie-app. Zachte kleur, korte woorden, niets met een rand.

De Marks van Gradiently bevatten zachte, diffuse materialen met ingebouwde korrel, en ze houden het gebied achter je woorden rustig, zodat een blurry look de kop nooit opslokt. Je kunt gratis ontwerpen met elke vrije Mark in de Studio.

## FAQ

### Hoe maak ik een blurry gradient?

Zet drie tot vijf grote vormen in verwante kleuren op een effen ondergrond, pas een zware gaussiaanse blur toe van ongeveer 10 tot 20 procent van de korte zijde van het canvas en voeg dan een lichte korrellaag toe.

### Wat is het verschil tussen een blurry gradient en een aurora gradient?

Een aurora gradient heeft linten van licht met een duidelijke stroming, meestal op een donkere hemel. Een blurry gradient is diffuse kleur zonder richting of zichtbare structuur.

### Kan ik een blurry gradient alleen met CSS maken?

Ja. Leg meerdere radiale gradients over elkaar die naar transparant vervagen, of vervaag absoluut gepositioneerde cirkels met `filter: blur()`.

### Waarom heeft mijn blurry gradient banden?

Lange, zachte overgangen hebben weinig aparte kleurstappen, dus er verschijnen strepen. Voeg fijne korrel toe en exporteer als PNG in plaats van gecomprimeerde JPEG.