# Ruisverlopen: vloeiende kleur met een korrelige afwerking

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

Ruisverlopen zijn makkelijk te beschrijven en lastig goed te krijgen. Dit zijn vijf geteste recepten, elk met kleuren, ruisinstellingen en de reden waarom ze werken, plus wat elke schuifregelaar van een generator eigenlijk doet.

## The short version

- Een ruisverloop is een vloeiend kleurmengsel met een laag fijne willekeurige ruis erbovenop, wat het een gedrukte, tastbare afwerking geeft en banding verbergt.
- De twee instellingen die het meest tellen zijn ruisfrequentie, die de korrelgrootte bepaalt, en dekking, die bepaalt hoe sterk het eruitziet.
- Fractale ruis met een frequentie tussen 0,6 en 0,9, gemengd in Overlay of Soft Light op 8 tot 20 procent dekking, past bij de meeste schermachtergronden.
- Donkere ruisverlopen hebben minder ruis nodig dan lichte, omdat korrel het best zichtbaar is in schaduwen en middentonen.
- In CSS kan ruis worden getekend met een inline SVG-filter `feTurbulence`, zodat hij op elk formaat scherp blijft en geen afbeeldingsbestand nodig heeft.

Een **ruisverloop** is een vloeiend kleurmengsel met een fijne laag willekeurige ruis erover, zodat de kleur gedrukt aanvoelt in plaats van gerenderd. Het mengsel geeft je de kleur en de richting van het licht; de ruis geeft je een oppervlak en voorkomt dat het mengsel in banden uiteenvalt. Hieronder staan vijf recepten die je kunt kopiëren, daarna een heldere uitleg van elke generatorinstelling zodat je je eigen kunt maken.

## Vijf recepten voor ruisverlopen

Elk recept is een basisverloop en een ruisinstelling. De verlopen worden hier zonder ruis getoond zodat je de kleur ziet; de tabel hieronder geeft de ruis die je erbovenop zet. Ze verschillen bewust van elkaar: één donker, één licht, één warm, één koel, één gedurfd.

- 1. Nachtviolet: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Perzikpapier: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Zonsondergangposter: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Diepe lagune: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Helderblauw: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

De vijf basismengsels, vóór ruis. Klik op een mengsel om de CSS te kopiëren.

| Recept | Frequentie | Mengen | Dekking | Waarom |
| --- | --- | --- | --- | --- |
| 1. Nachtviolet | 0,85, 3 octaven | Overlay | 8% | Donkere tinten tonen korrel snel, dus houd het licht |
| 2. Perzikpapier | 0,65, 4 octaven | Multiply | 10% | Multiply maakt alleen donkerder, dus de lichte ondergrond blijft zacht |
| 3. Zonsondergangposter | 0,6, 3 octaven | Overlay | 20% | Gedurfde kleur draagt zwaardere, grovere korrel zoals een zeefdruk |
| 4. Diepe lagune | 0,9, 2 octaven | Soft Light | 12% | Fijne korrel houdt een koel mengsel schoon aanvoelen |
| 5. Helderblauw | 0,75, 3 octaven | Soft Light | 14% | Blauw naar lichtblauw vertoont slecht banding; ruis maakt het vloeiender |

Ruisinstellingen voor elk recept, met fractale ruis in monochroom. Frequentie en octaven komen direct overeen met het SVG-filter in de code hieronder.

## Instellingen van een ruisverloopgenerator uitgelegd

Elke [verloopgenerator](https://gradiently.design/nl/guide/gradient-generator) met een ruisoptie, en elk SVG-ruisfilter, gebruikt een versie van dezelfde bediening. Zodra je weet wat elk doet, kun je elk recept lezen en elk resultaat bijsturen.

| Instelling | Wat het verandert | Goed beginpunt |
| --- | --- | --- |
| **Frequentie** (schaal, grootte) | Korrelgrootte. Hoger is fijner, lager is grover. | 0,6 tot 0,9 voor schermen |
| **Octaven** (detail) | Lagen detail in de ruis. Meer ziet er rijker uit en kost meer om te tekenen. | 2 tot 4 |
| **Type** | Fractale ruis is zacht en wolkachtig; turbulentie is scherper en streperiger. | Fractale ruis |
| **Kleur** | Monochroom houdt je palet exact; kleurruis voegt filmachtige spikkels toe. | Monochroom |
| **Mengmodus** | Hoe ruis met kleur mengt. Overlay voegt contrast toe, Soft Light is zachter, Multiply maakt alleen donkerder. | Overlay of Soft Light |
| **Dekking** (hoeveelheid) | Totale sterkte. | 8 tot 20% |
| **Seed** | Welk willekeurig patroon je krijgt. Verander hem als je een kluit ziet die je niet bevalt. | Willekeurig |

De bediening achter elke ruisgenerator, in gewone woorden.

> **Beoordeel ruis op het eindformaat** Ruis die er goed uitziet ingezoomd op een laptop verdwijnt vaak op een telefoon of wordt papperig na een upload. Controleer de export op het formaat waarop mensen hem zien, op het scherm dat ze gebruiken.

## Zo maak je een ruisverloop in CSS

De schoonste methode legt een SVG-ruisafbeelding over je verloop in één `background`-declaratie en mengt ze dan. Wissel het verloop voor een willekeurig recept hierboven en stel de frequentie en dekking in uit de tabel.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

Recept 1 in CSS. De ruis zit op een pseudo-element onder de inhoud, zodat tekst scherp blijft. `stitchTiles` laat de tegel naadloos herhalen.

### De spikkelmethode met hoog contrast

Voor een gedurfdere, bijna risograaf-achtige look zet je de ruis en het verloop in dezelfde laag en haal je ze door een contrastfilter. De ruis wordt platgedrukt tot harde spikkels die het licht van het verloop volgen. Het is luider dan recept 3, dus gebruik het voor posters en hero-banners, niet achter lopende tekst.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Contrast drukt zachte ruis plat tot spikkels en de sterke helderheid duwt de rest naar wit. Multiply legt het resultaat dan over een gekleurde ouder. Stem de twee filterwaarden samen af en houd tekst in een aparte laag erboven.

## De juiste ruis kiezen voor het formaat

Ruis is relatief ten opzichte van het canvas. Hetzelfde filter leest als fijn op een telefoonstory en grof op een kleine banner, dus schaal de frequentie naar het formaat in plaats van overal één bestand te hergebruiken.

Een verticale aftelstory op een korrelige violette verloopachtergrond

Een story van 1080×1920 wordt van dichtbij op een telefoon gezien: houd de ruis fijn en vrij licht.

Een brede website-hero met een kop over een zacht korrelig warm verloop

Een website-hero van 1920×1080 vult een groot scherm: verlaag de dekking, want grote vlakken maken ruis opvallend.

- **Stories en posts:** frequentie rond 0,8, dekking 8 tot 14 procent. Iets meer dan je denkt, want uploads verzachten het.
- **Website-heroes:** frequentie 0,7 tot 0,9, dekking 4 tot 10 procent. Zie [achtergronden voor website-heroes](https://gradiently.design/nl/guide/website-hero-background).
- **Posters voor druk:** grovere korrel, frequentie 0,5 tot 0,7 op het uiteindelijke pixelformaat, zodat hij de pers overleeft.
- **Donkere achtergronden:** halveer je gebruikelijke hoeveelheid. [Donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) legt uit waarom schaduwen korrel het eerst tonen.

## Ruisverloop of korrelverloop

Het is hetzelfde idee met een andere nadruk. Mensen zeggen korrelverloop als ze de look bedoelen en ruisverloop als ze bedoelen hoe het is gemaakt. [Korrelverlopen](https://gradiently.design/nl/guide/grainy-gradients) behandelt waarom korrel werkt en waar je hem plaatst; deze pagina is het receptenboek. Wil je textuur zonder kleurmengsel, begin dan bij [korreltextuur](https://gradiently.design/nl/guide/textured-background).

Wil je liever helemaal geen schuifregelaars afstellen, dan draagt elke Gradiently Mark zijn eigen korrelinstelling naast zijn kleuren, licht en beweging, vers gerenderd op elk formaat zodat ruis nooit uitrekt of vervaagt. Ontwerp gratis met elke ongeclaimde Mark.

## FAQ

### Wat is een ruisverloop?

Een vloeiend kleurmengsel met een fijne laag willekeurige ruis erbovenop. De ruis geeft het een gedrukte afwerking en verbergt banding.

### Welke ruisinstellingen moet ik voor een verloop gebruiken?

Fractale ruis, monochroom, een frequentie van 0,6 tot 0,9 en 2 tot 4 octaven, gemengd in Overlay of Soft Light op ongeveer 8 tot 20 procent dekking.

### Hoe voeg ik ruis toe aan een verloop in CSS?

Leg een inline SVG met een `feTurbulence`-filter over het verloop, op een pseudo-element, en stel `mix-blend-mode: overlay` in met een lage dekking.

### Waarom ziet mijn ruisverloop er na het uploaden wazig uit?

Platforms comprimeren afbeeldingen opnieuw en strijken fijn detail glad. Exporteer op het exacte platformformaat als PNG of JPEG van hoge kwaliteit en gebruik iets meer ruis voor socialposts.

### Is een ruisverloop hetzelfde als een korrelverloop?

In de praktijk wel. Korrelig beschrijft de look en ruis beschrijft de methode waarmee het is gemaakt.