Ruisverlopen: vloeiende kleur met een korrelige afwerking

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.

Instellingen van een ruisverloopgenerator uitgelegd

Elke verloopgenerator 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.

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.

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

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.

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

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.

• 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.
• 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 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 behandelt waarom korrel werkt en waar je hem plaatst; deze pagina is het receptenboek. Wil je textuur zonder kleurmengsel, begin dan bij korreltextuur.

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.