Blurry gradient: zachte kleurvlakken die modern aanvoelen

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.

Een blurry gradient maken

1. 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. 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 voor meer combinaties.

3. 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. 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. 5

   Voeg korrel toe

   Een fijne ruislaag met 3 tot 6 procent dekking verbergt banding en voorkomt dat het resultaat plastic oogt.

6. 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.

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.

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.

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.

/* 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; }

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.

Waarom blurry gradients goedkoop ogen, en de oplossing

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 legt uit waarom. En als twee van je kleuren in grijs samenkomen, vervang er dan een door een buurkleur, zoals beschreven in modderige gradients.

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.