Nieuw · Lancering
Licht dat
blijft hangen
Een rustige, levende achtergrond die je boodschap draagt in plaats van overstemt.
CSS-lab · Achtergronden
Bewegend grid-patroon
Een oneindig scrollend lijnenraster in perspectief, een synthwave-vloer in cobalt met een violette horizon en een acid lijn, zonder afbeeldingen.
- Gemiddeld
- Pure CSS
- MIT-licentie
linear-gradientbackground-sizeperspective()rotateXmask-image
Achtergrond · pure CSS
Bouw op een
bewegend raster
<section class="bwg-scene">
<div class="bwg-sky" aria-hidden="true"></div>
<div class="bwg-floor" aria-hidden="true"></div>
<div class="bwg-content">
<p class="bwg-kicker">Achtergrond · pure CSS</p>
<h2 class="bwg-title">Bouw op een<br>bewegend raster</h2>
</div>
</section>/* Bewegend grid-patroon — prefix .bwg- */
.bwg-scene {
--bg: #0C0C0D;
--line: #2E5BFF;
--glow: #9B5CFF;
--accent: #C6FF3D;
--horizon: 58%;
--cell: 56px;
--tilt: 68deg;
--depth: 420px;
--speed: 1.1s;
position: relative;
width: 100%;
min-height: 520px;
overflow: hidden;
background: var(--bg);
color: #F9F8F6;
}
/* gloeiende lucht + horizonlijn */
.bwg-sky {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--horizon);
background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(155, 92, 255, .55), transparent 70%);
}
.bwg-sky::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--accent);
box-shadow: 0 0 16px var(--accent), 0 0 40px var(--glow);
}
/* gekantelde vloer: bovenrand = horizon, onderrand komt naar je toe */
.bwg-floor {
position: absolute;
top: var(--horizon);
bottom: -20%;
left: -50%;
right: -50%;
background-image:
linear-gradient(to right, var(--line) 2px, transparent 2px),
linear-gradient(to bottom, var(--line) 2px, transparent 2px);
background-size: var(--cell) var(--cell);
transform-origin: 50% 0;
transform: perspective(var(--depth)) rotateX(var(--tilt));
/* vervagen naar de horizon */
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
mask-image: linear-gradient(to bottom, transparent, #000 45%);
animation: bwg-roll var(--speed) linear infinite;
}
/* precies één cel = naadloze loop */
@keyframes bwg-roll {
from { background-position: 0 0, 0 0; }
to { background-position: 0 var(--cell), 0 var(--cell); }
}
.bwg-content {
position: relative;
z-index: 1;
padding: clamp(40px, 9%, 80px) 24px 0;
text-align: center;
}
.bwg-kicker {
margin: 0 0 14px;
font: 700 13px/1 ui-monospace, Menlo, Consolas, monospace;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.bwg-title {
margin: 0;
font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
font-size: clamp(34px, 7vw, 72px);
line-height: .95;
letter-spacing: -.02em;
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.bwg-floor { animation: none; }
}Wat het is en waar je het gebruikt
Dit bewegende grid is een achtergrond die diepte en snelheid suggereert: een raster van cobalt lijnen dat in perspectief naar de horizon wegloopt en continu naar je toe lijkt te rollen. Boven de horizon gloeit een violette lucht, en een dunne acid lijn markeert de overgang. Het is een knipoog naar de synthwave-vloer uit de jaren tachtig, maar dan in de kleuren van een strak, modern merk.
Gebruik het als achtergrond van een hero, een launch-pagina, een eventsite, een 404-pagina of een sectie die over technologie of de toekomst gaat. De content staat in de bovenste helft, zodat de beweging eronder nooit met de tekst concurreert.
Zo werkt het
- Het raster:
.bwg-floorheeft tweelinear-gradient-lagen van 2px, een horizontale en een verticale, metbackground-size: var(--cell) var(--cell). Herhaald vormt dat een strak grid. - Het perspectief: de vloer krijgt
transform: perspective(var(--depth)) rotateX(var(--tilt))mettransform-originaan de bovenkant. Daardoor kantelt hij weg en lopen de lijnen samen richting de horizon. Hij is breder dan de scene (left: -50%; right: -50%), zodat je de zijkanten nooit ziet. - De beweging:
@keyframes bwg-rollschuiftbackground-positionprecies één cel op. Omdat het patroon zich na één cel herhaalt, is de loop naadloos en oneindig. - De horizon: een
mask-imagelaat het raster naar de horizon toe vervagen, en.bwg-skylegt er een violetteradial-gradienten een acid lijn overheen.
Aanpassen
Op .bwg-scene staan --line (rasterkleur), --glow (horizon), --accent (horizonlijn en kicker), --cell (celgrootte), --tilt (kantelhoek), --depth (perspectief) en --speed (tijd per cel). Een kleinere --tilt maakt de vloer vlakker, een kleinere --depth maakt het perspectief extremer. Voor een rustigere achtergrond verhoog je --speed.
Toegankelijkheid en browsersupport
De vloer en de lucht zijn aria-hidden="true"; de kop en tekst staan in gewone HTML met hoog contrast op de donkere bovenkant. Met prefers-reduced-motion: reduce staat het raster stil, het perspectief blijft. De animatie gebruikt background-position, wat in alle actuele browsers soepel loopt op een vlak van deze grootte. Voor oudere Safari staat -webkit-mask-image erbij; zonder masker loopt het raster gewoon tot de horizon door.
Verder lezen
Een bewegende achtergrond werkt alleen als de hero erboven goed in elkaar zit. Lees in hero-secties die converteren waar je op let. Wil je zulke kinetische achtergronden op je eigen site, kijk dan bij interactief webdesign en animaties.
Meer achtergronden
Nog meer gedurfde CSS
Licht dat
Studio · 2026
Kleur met
korrel
Een diep verloop met filmkorrel, volledig in CSS. Geen afbeeldingen, geen extra requests.
Bekijk het werk