Nieuw · Lancering
Licht dat
blijft hangen
Een rustige, levende achtergrond die je boodschap draagt in plaats van overstemt.
CSS-lab · Achtergronden
Noise-gradient achtergrond
Een diep kleurverloop in cobalt, violet en acid met echte filmkorrel erover, gemaakt met een inline SVG feTurbulence-filter als data-URI.
- Gemiddeld
- Pure CSS
- MIT-licentie
radial-gradientSVG feTurbulencedata-URImix-blend-modeisolation
Studio · 2026
Kleur met
korrel
Een diep verloop met filmkorrel, volledig in CSS. Geen afbeeldingen, geen extra requests.
Bekijk het werk<section class="ng-scene">
<div class="ng-content">
<p class="ng-kicker">Studio · 2026</p>
<h2 class="ng-title">Kleur met<br>korrel</h2>
<p class="ng-intro">Een diep verloop met filmkorrel, volledig in CSS. Geen afbeeldingen, geen extra requests.</p>
<a class="ng-btn" href="#">Bekijk het werk</a>
</div>
</section>/* Noise-gradient achtergrond — prefix .ng- */
.ng-scene {
--base: #0C0C0D;
--c1: #2E5BFF;
--c2: #9B5CFF;
--c3: rgba(198, 255, 61, .55);
--grain: .38;
--grain-speed: .9s;
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
align-items: center;
width: 100%;
min-height: 520px;
padding: 48px clamp(24px, 6%, 72px);
color: #F9F8F6;
/* drie kleurvlekken op carbon */
background:
radial-gradient(60% 70% at 85% 20%, var(--c2), transparent 70%),
radial-gradient(70% 80% at 100% 100%, var(--c1), transparent 70%),
radial-gradient(40% 45% at 55% 105%, var(--c3), transparent 70%),
var(--base);
}
/* korrel uit een inline SVG-filter */
.ng-scene::before {
content: "";
position: absolute;
inset: -50%;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' 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");
opacity: var(--grain);
mix-blend-mode: overlay;
animation: ng-grain var(--grain-speed) steps(4) infinite;
}
/* korrel verspringt als analoge film */
@keyframes ng-grain {
0% { transform: translate(0, 0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -5%); }
75% { transform: translate(-2%, -2%); }
100% { transform: translate(5%, 4%); }
}
.ng-content {
max-width: 560px;
}
.ng-kicker {
margin: 0 0 14px;
font: 700 13px/1 ui-monospace, Menlo, Consolas, monospace;
letter-spacing: .14em;
text-transform: uppercase;
color: #C6FF3D;
}
.ng-title {
margin: 0 0 16px;
font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
font-size: clamp(40px, 8vw, 84px);
line-height: .92;
letter-spacing: -.02em;
text-transform: uppercase;
}
.ng-intro {
margin: 0 0 26px;
max-width: 42ch;
font-size: clamp(16px, 2vw, 18px);
line-height: 1.5;
color: rgba(249, 248, 246, .86);
}
.ng-btn {
display: inline-flex;
padding: 14px 22px;
background: #F9F8F6;
color: #0C0C0D;
font-weight: 800;
text-decoration: none;
box-shadow: 5px 5px 0 #C6FF3D;
transition: transform .2s ease, box-shadow .2s ease;
}
.ng-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 #C6FF3D;
}
.ng-btn:focus-visible {
outline: 3px solid #C6FF3D;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.ng-scene::before { animation: none; }
.ng-btn { transition: none; }
.ng-btn:hover { transform: none; }
}Wat het is en waar je het gebruikt
Gladde gradients ogen al snel als een standaard template. Leg je er een laagje korrel overheen, dan krijgt hetzelfde kleurverloop textuur en diepte, alsof het op papier of film is gedrukt. Deze noise-gradient combineert drie zachte kleurvlekken in cobalt, sunset violet en acid lime op carbon, met daarover een fijne, licht flikkerende ruis. Er komt geen enkele afbeelding aan te pas: de korrel is een klein SVG-filter dat direct in de CSS staat.
Gebruik hem als achtergrond van een hero, een CTA-blok, een footer of een cover voor een case. Korrel maakt ook banding minder zichtbaar: de lelijke trapjes die je soms ziet in grote, donkere gradients.
Zo werkt het
- Het kleurverloop:
.ng-scenestapelt drieradial-gradient-lagen op een carbon basiskleur. Elke laag heeft een eigen positie en grootte, zodat de kleuren in elkaar overvloeien als een mesh. - De korrel:
.ng-scene::beforegebruikt alsbackground-imageeendata:image/svg+xml-URI met eenfeTurbulence-filter van het typefractalNoise, ontkleurd metfeColorMatrix type="saturate". Metmix-blend-mode: overlayen een lageopacityvalt de ruis als korrel over de kleuren. - Levende korrel: het pseudo-element is groter dan de scene (
inset: -50%) en verspringt met@keyframes ng-grainensteps()over een paar posities. Dat geeft het subtiele flikkeren van analoge film, zonder vloeiende beweging die afleidt. - Content erboven:
isolation: isolateenz-indexhouden de tekst boven de korrel.
Aanpassen
Op .ng-scene stel je --c1, --c2 en --c3 in voor de kleurvlekken, --base voor de ondergrond, --grain voor de sterkte van de korrel (0 tot 1) en --grain-speed voor het tempo van het flikkeren. Wil je grovere korrel, verlaag dan baseFrequency in de data-URI van .8 naar bijvoorbeeld .5. Op een lichte achtergrond werkt mix-blend-mode: multiply vaak beter dan overlay.
Toegankelijkheid en browsersupport
De korrel is puur decoratief en zit in een pseudo-element, dus screenreaders merken er niets van. Kop en tekst staan in off-white boven het donkerste deel van het verloop, met voldoende contrast; de knop heeft een duidelijke :focus-visible-ring. Met prefers-reduced-motion: reduce staat de korrel stil. SVG-filters als data-URI en mix-blend-mode werken in alle actuele browsers.
Verder lezen
Korrel, ruwe texturen en rauwe typografie horen bij een bewuste stijlkeuze. Lees meer in ons artikel over brutalistisch webdesign. Wil je zo’n eigen beeldtaal voor je hele site, kijk dan bij webdesign.
Meer achtergronden
Nog meer gedurfde CSS
Licht dat
Achtergrond · pure CSS