Studio · 2026
Kleur met
korrel
Een diep verloop met filmkorrel, volledig in CSS. Geen afbeeldingen, geen extra requests.
Bekijk het werkCSS-lab · Achtergronden
Aurora-achtergrond
Zachte lichtbanden in acid, cobalt en violet die als een noorderlicht traag golven en verkleuren achter je kop. Pure CSS met blur en hue-rotate.
- Gemiddeld
- Pure CSS
- MIT-licentie
filter: blur()mix-blend-mode: screenhue-rotatelinear-gradient@keyframes
Nieuw · Lancering
Licht dat
blijft hangen
Een rustige, levende achtergrond die je boodschap draagt in plaats van overstemt.
<section class="au-scene">
<div class="au-lights" aria-hidden="true">
<span class="au-band au-band--a"></span>
<span class="au-band au-band--b"></span>
<span class="au-band au-band--c"></span>
</div>
<div class="au-content">
<p class="au-kicker">Nieuw · Lancering</p>
<h2 class="au-title">Licht dat<br>blijft hangen</h2>
<p class="au-intro">Een rustige, levende achtergrond die je boodschap draagt in plaats van overstemt.</p>
<div class="au-actions">
<a class="au-btn" href="#">Start je project</a>
<a class="au-btn au-btn--ghost" href="#">Bekijk cases</a>
</div>
</div>
</section>/* Aurora-achtergrond — prefix .au- */
.au-scene {
--bg: #0C0C0D;
--c1: #C6FF3D;
--c2: #2E5BFF;
--c3: #9B5CFF;
--blur: 60px;
--speed: 16s;
--hue: 40deg;
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
align-items: end;
width: 100%;
min-height: 520px;
padding: 56px clamp(24px, 6%, 72px);
background: var(--bg);
color: #F9F8F6;
}
/* donkere onderkant voor leesbaarheid */
.au-scene::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(12, 12, 13, .85), rgba(12, 12, 13, .1) 65%);
}
/* wrapper verschuift de tint */
.au-lights {
position: absolute;
inset: 0;
z-index: -2;
animation: au-hue calc(var(--speed) * 2) ease-in-out infinite alternate;
}
/* zachte lichtband */
.au-band {
position: absolute;
left: -20%;
width: 140%;
height: 38%;
border-radius: 50%;
filter: blur(var(--blur));
mix-blend-mode: screen;
opacity: .8;
animation: au-drift var(--speed) ease-in-out infinite alternate;
}
.au-band--a {
top: 2%;
background: linear-gradient(90deg, transparent 10%, var(--c1) 45%, transparent 85%);
opacity: .55;
}
.au-band--b {
top: 18%;
background: linear-gradient(90deg, transparent 5%, var(--c2) 35%, var(--c3) 65%, transparent 95%);
animation-duration: calc(var(--speed) * 1.4);
animation-delay: calc(var(--speed) * -.5);
}
.au-band--c {
top: 34%;
background: linear-gradient(90deg, transparent 20%, var(--c3) 60%, transparent 90%);
animation-duration: calc(var(--speed) * .8);
animation-direction: alternate-reverse;
}
@keyframes au-drift {
0% { transform: translate(-8%, 0) rotate(-6deg) scale(1, .9); }
50% { transform: translate(4%, 10%) rotate(3deg) scale(1.1, 1.2); }
100% { transform: translate(10%, -4%) rotate(8deg) scale(.95, 1); }
}
@keyframes au-hue {
to { filter: hue-rotate(var(--hue)); }
}
.au-content {
max-width: 620px;
}
.au-kicker {
margin: 0 0 14px;
font: 700 13px/1 ui-monospace, Menlo, Consolas, monospace;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c1);
}
.au-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;
}
.au-intro {
margin: 0 0 26px;
max-width: 44ch;
font-size: clamp(16px, 2vw, 18px);
line-height: 1.5;
color: rgba(249, 248, 246, .86);
}
.au-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.au-btn {
display: inline-flex;
padding: 14px 22px;
border: 2px solid var(--c1);
border-radius: 999px;
background: var(--c1);
color: #0C0C0D;
font-weight: 800;
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.au-btn--ghost {
background: transparent;
border-color: rgba(249, 248, 246, .6);
color: #F9F8F6;
}
.au-btn:hover {
background: #F9F8F6;
border-color: #F9F8F6;
color: #0C0C0D;
}
.au-btn:focus-visible {
outline: 3px solid var(--c1);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.au-lights,
.au-band {
animation: none;
}
.au-btn { transition: none; }
}Wat het is en waar je het gebruikt
Een aurora-achtergrond brengt rust en beweging tegelijk. Drie brede lichtbanden in acid lime, cobalt en sunset violet hangen boven een carbon vlak, zwaar vervaagd, en schuiven heel langzaam heen en weer. Ondertussen verschuift hun tint een klein beetje, zoals noorderlicht dat nooit twee keer hetzelfde is. Daarboven staat een gewone hero met kicker, kop, intro en knop, zodat je direct ziet hoe het in een echte pagina werkt.
Gebruik hem voor een hero, een productlancering, een aanmeldpagina of een rustige CTA-sectie onderaan. Omdat de beweging traag en vaag is, trekt hij geen aandacht weg van de tekst, maar voelt de pagina wel levend.
Zo werkt het
- De banden: elke
.au-bandis een breed, plat vlak met eenlinear-gradientdie aan beide kanten naar transparant loopt, afgerond metborder-radius: 50%. Een stevigefilter: blur()maakt er een zachte lichtsluier van. - Licht dat optelt:
mix-blend-mode: screenzorgt dat overlappende banden lichter worden in plaats van elkaar af te dekken, net als echt licht. - De beweging: elke band heeft
@keyframes au-driftmettranslate,rotateenscale, maar met een eigen duur enanimation-delay. Zo lopen ze nooit in de pas. - De verkleuring: de wrapper
.au-lightsanimeertfilter: hue-rotate()tussen 0 en 40 graden. Dat is genoeg voor variatie, maar te weinig om de merkkleuren uit het oog te verliezen. - Leesbaarheid: een
linear-gradientop.au-scene::aftermaakt de onderkant donkerder, zodat de tekst altijd contrast houdt.
Aanpassen
Op .au-scene staan --c1, --c2 en --c3 voor de kleuren van de banden, --blur voor de zachtheid, --speed als basistempo en --hue voor hoe ver de tint mag verschuiven. Zet --hue op 0deg als je exact je merkkleuren wilt houden. Een kleinere --blur geeft scherpere, meer grafische banden.
Toegankelijkheid en browsersupport
De lichtbanden zijn aria-hidden="true". De kop en tekst staan in off-white op een donkere ondergrond en de knoppen hebben een duidelijke :focus-visible-ring. Met prefers-reduced-motion: reduce staan de banden en de verkleuring stil; het beeld blijft mooi, alleen bevroren. filter, mix-blend-mode en hue-rotate werken in alle actuele browsers. Grote blur-filters kosten wat rekenkracht, dus gebruik deze achtergrond op één plek per pagina.
Verder lezen
Een sfeervolle achtergrond helpt pas echt als de boodschap ervoor klopt. Lees in hero-secties die converteren hoe je kop, intro en knoppen opbouwt. Wil je beweging die je merk versterkt, kijk dan naar interactief webdesign en animaties.
Meer achtergronden
Nog meer gedurfde CSS
Kleur met
Achtergrond · pure CSS