# Vloeibare kleurverlopen: stromende kleur die gegoten lijkt

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

Vloeibare kleurverlopen lijken op verf die op een doek is gegoten of inkt die door water krult. Ze ontstaan door banden kleur te buigen, niet door ze te mengen. Zo doe je dat.

## The short version

- Een vloeibaar kleurverloop lijkt gegoten omdat de kleuren aparte banden blijven die buigen, kronkelen, dunner en dikker worden, in plaats van gelijkmatig in elkaar over te lopen.
- De gebruikelijke manier om er een te maken is beginnen met rechte kleurstrepen en die vervormen met een warp-, liquify- of displacementfilter.
- Op het web kan een SVG-filter met feTurbulence en feDisplacementMap een gestreept CSS-verloop veranderen in een gemarmerd, vloeibaar oppervlak.
- Dunne heldere banden langs de bochten lezen als licht dat een nat oppervlak vangt en maken het effect veel overtuigender.
- Vloeibare kleurverlopen zijn druk, dus tekst heeft een rustig gebied of een grote, eenvoudige vorm nodig waar de stroming vertraagt.

Een **vloeibaar kleurverloop** is kleur die gegoten lijkt in plaats van gemengd: banden van tint die om elkaar krullen, op de ene plek dun worden uitgerekt en op een andere samenpoelen, met een glans van licht langs de bochten. Denk aan acrylgietschilderijen, gemarmerd schutblad, olie op een natte weg of inkt die in water valt. Het verrassende is hoe ze worden gemaakt. Je mengt geen kleuren om er te komen; je begint met schone strepen en buigt ze. Daarom levert een gewoon verlooptool de look nooit helemaal zelf op.

## Wat kleur vloeibaar laat lijken

- **Banden, geen overgangen.** Elke kleur behoudt zijn identiteit als lint. Een brede zachte overgang leest als lucht, niet als vloeistof.
- **Wisselende dikte.** Dezelfde band zwelt en versmalt onderweg, zoals verf doet als ze stroomt.
- **Geen hoeken.** Elke draai is een kromme. Eén scherpe hoek breekt de illusie.
- **Licht op de bochten.** Een dunne bleke lijn langs enkele randen leest als een nat highlight.
- **Eén stroomrichting.** Kronkels die allemaal dezelfde kant op leunen voelen als één gieting.

## Vier looks voor een vloeibaar kleurverloop

Deze stalen zijn het ruwe materiaal: de kleurbanden die je zou buigen. Elk is één CSS-waarde, dus je kunt het kopiëren als beginpunt voor elk van de onderstaande methoden.

- Banden van een acrylgieting: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Marmerbanden: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Olievlek: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Gesmolten metaal: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`

Strepen klaar om te vervormen. Het gesmolten metaal heeft scherpe, heldere banden tussen donkere, die chroomhighlights worden zodra ze gebogen zijn.

- Diep indigo: #1e1b4b
- Ultramarijn: #4f46e5
- Gietroze: #f472b6
- Crèmehighlight: #fde68a
- Petrolcel: #0d9488

Een gietpalet: een donkere basis, twee sterke middentinten, een bleek highlight in dunne lijnen en één accent dat in kleine cellen verschijnt.

Let op de bleke kleur. In een gietschilderij is de lichtste toon meestal de dunste band, en die laat de donkerdere kleuren eromheen rijk lijken. Gebruik hem als highlight, niet als vulling.

## Een vloeibaar kleurverloop maken in een designtool

1. **Teken strepen** Vul een canvas dat groter is dan je eindformaat met vijf tot acht kleurbanden onder een hoek. Maak sommige banden breed en sommige heel dun.
2. **Vervorm het geheel** Gebruik een warp-, twirl- of golfvervorming om de strepen in een brede S-bocht te buigen. Houd de eerste ronde mild.
3. **Duw met een liquify-penseel** Sleep met een groot, zacht penseel de banden in één richting om kronkels en poelen te maken. Werk van groot naar klein.
4. **Voeg enkele highlights toe** Schilder dunne bleke lijnen langs twee of drie bochten, de stroming volgend, op lage dekking.
5. **Snijd het beste deel bij** Vervorming laat rommelige randen achter. Snijd bij tot het interessantste stuk en pas het formaat aan op je medium.
6. **Werk af met korrel** Een lichte ruislaag verbergt banding door het uitrekken en geeft het oppervlak een tastbaar gevoel.

Software verschilt in naamgeving, maar de meeste editors hebben een warp en een liquify- of smudgetool. [Verlopen in Photoshop](https://gradiently.design/nl/guide/photoshop-gradient) en [verlopen in Procreate](https://gradiently.design/nl/guide/procreate-gradient) behandelen de specifieke tools van elk.

## Een vloeibaar kleurverloop met SVG en CSS

Op het web kan een SVG-filter het vervormen doen. `feTurbulence` genereert vloeiende ruis en `feDisplacementMap` gebruikt die om de pixels van een gestreept verloop rond te duwen. Een lage `baseFrequency` geeft brede, trage kronkels; een hoge `scale` duwt de banden verder.

```html
<svg width="0" height="0" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
    <feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="liquid"></div>

<style>
  .liquid {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(115deg,
      #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
    filter: url(#liquid);
  }
</style>
```

Banden van een acrylgieting gebogen door een SVG-displacementfilter. Wijzig de seed voor een andere gieting met dezelfde kleuren.

> **Render grote vlakken één keer** Displacementfilters zijn duur op grote elementen. Render voor een achtergrond over de hele pagina het resultaat naar een afbeelding op het formaat dat je nodig hebt, of houd het gefilterde element klein. [SVG feTurbulence](https://gradiently.design/nl/guide/svg-noise-filter) legt de parameters uit, en [WebGL-verlopen](https://gradiently.design/nl/guide/shader-gradients) zijn de route voor vloeistof die in realtime beweegt.

## Vloeibare kleurverlopen laten bewegen

Vloeistof is de ene verlopenstijl die bijna om beweging vraagt. Een gieting die langzaam wegdrijft in een webhero of een Story voelt levend. Houd de snelheid laag, alsof de verf dik is, en laat hem loopen zodat het eind bij het begin aansluit. De turbulentie live animeren is zwaar, dus een korte geëxporteerde videoloop is meestal de betere route. Een loop van 8 tot 15 seconden geeft een gieting genoeg tijd om te reizen zonder dat iemand de herhaling opmerkt, en een MP4 op 1080×1920 bedient Stories, Reels en telefoonachtergronden uit één bestand. [Geanimeerde kleurverloopachtergronden](https://gradiently.design/nl/guide/animated-gradient-background) behandelt lichtere benaderingen.

## Woorden op een vloeibaar kleurverloop zetten

### Vecht met de woorden

- Dunne banden met hoog contrast achter de kop
- Overal kronkels met dezelfde dichtheid
- Kleine tekst over de drukste poel
- Highlights die de letters kruisen

### Draagt de woorden

- Een brede, rustige band waar de stroming vertraagt
- Drukke kronkels aan de randen, rustig in het midden
- Grote, zware letters met weinig woorden
- Highlights uit de buurt van de tekst

Een staande post met het ene woord Gieten in grote letters op een stromend vloeibaar kleurverloop

Eén woord, zware letters, gezet op een rustig stuk kleur.

Een vierkante muziekcover met de titel Onderstroom op een kolkend vloeibaar kleurverloop

Een vierkante releasecover. Vloeibare looks passen bij muziek omdat ze aanvoelen als zichtbaar geworden geluid.

De Marks van Gradiently zijn levende achtergronden waarvan de materialen kunnen stromen en drijven, en elk verplaatst het rustigste deel van zijn oppervlak automatisch achter je woorden. Pro exporteert ze als GIF, MP4 of WebM, zodat een vloeibare look een Story of een herolus kan worden zonder een shader te bouwen. Lees [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) voor de kant van de leesbaarheid.

## FAQ

### Hoe maak ik een vloeibaar kleurverloop?

Teken kleurstrepen en buig ze dan met een warp-, twirl- of liquify-tool tot ze kronkelen. Voeg dunne bleke highlights langs enkele bochten en een beetje korrel toe.

### Kun je een vloeibaar kleurverloop in CSS maken?

Grotendeels met hulp van SVG. Pas een SVG-filter met `feTurbulence` en `feDisplacementMap` toe op een gestreept CSS-verloop om het in een vloeibaar patroon te buigen.

### Wat is het verschil tussen een vloeibaar kleurverloop en een meshverloop?

Een meshverloop mengt kleuren vloeiend over een raster. Een vloeibaar kleurverloop houdt kleuren als aparte banden die krullen en uitrekken, als gegoten verf.

### Welke kleuren werken voor een vloeibaar kleurverloop?

Een donkere basis, twee sterke middenkleuren en een bleke toon die alleen in dunne banden wordt gebruikt. Het contrast tussen dikke donkere en dunne lichte banden leest als vloeistof.