Northern Lights
Three CSS gradient layers animated by `auroraFlow` (wave + skew) and `auroraHue` (360° hue rotation) — pure CSS, zero JavaScript.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Atmosphere has 57 effects, including 10 free. Explore the category →
3 usage examples
How it works
The effect uses three .aurora-layer elements in position: absolute, each set to width: 200%; left: -50% — the over-width allows ±10% translations without revealing the scene's edges. Each layer carries a vertical linear-gradient of green–blue–purple at very low rgba opacity (0.06–0.12), followed by a filter: blur() of 25–40 px that blends the gradient bands into a soft luminous halo.
Two @keyframes drive each layer simultaneously. auroraFlow combines translateX (−10% ↔ +5%), skewX (−5° ↔ +3°), and scaleY (0.8 ↔ 1.2) with ease-in-out easing: the layer slides laterally, shears, and "breathes" vertically. auroraHue applies hue-rotate(0deg → 360deg) on the same blur filter at linear timing, continuously spinning all hues — greens become cyan, then blue, then violet, then green again.
The three layers are not in sync: their durations differ (6 s / 8 s / 10 s for auroraFlow; 10 s / 12 s / 15 s for auroraHue) and the middle layer runs animation-direction: reverse for auroraFlow — it drifts the opposite way, creating phase interference that mimics the unpredictability of a real aurora. The third layer also reverses auroraHue, shifting its hue cycle independently.
The stars are six white dots drawn by radial-gradient(1px 1px at …) on a single .aurora-stars element at opacity: 0.6 — no extra DOM nodes, no canvas. The effect is 100% CSS with no requestAnimationFrame or JS: the browser delegates all animations to GPU compositing via transform and filter properties.
Accessibility
- prefers-reduced-motion: absent from the code. No
@media (prefers-reduced-motion: reduce)rule is present — animations run even when the OS signals a motion-reduction preference. Add manually:@media (prefers-reduced-motion: reduce) { .aurora-layer { animation: none } }. - The
.aurora-containeris purely decorative but does not carryaria-hidden="true"— add it in your integration if no descriptive text accompanies the scene. - The
.aurora-labeltext is in the normal DOM flow and readable by screen readers; noroleoraria-labelis set on the scene itself. - Label contrast:
rgba(255,255,255,0.8)on#0a0a1ebackground → ratio ≈ 12:1, well above the WCAG AA threshold (4.5:1). The green text-shadow does not degrade readability. - No focusable element is introduced by the effect — it is purely decorative and requires no keyboard interaction.
Browser compatibility
Requires CSS animations, filter: blur() and hue-rotate() — supported in all modern browsers since 2016.
Without <code>filter</code> support (IE 11 and earlier), the layers render as sharp colored rectangles without blur — the dark atmosphere remains, the page stays functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="demo-preview">
<div class="aurora-container" aria-hidden="true">
<div class="aurora-stars"></div>
<div class="aurora-layer"></div><!-- layer 1: 8s auroraFlow / 12s auroraHue -->
<div class="aurora-layer"></div><!-- layer 2: 10s reverse / 15s normal -->
<div class="aurora-layer"></div><!-- layer 3: 6s normal / 10s reverse -->
</div>
<!-- Optional overlay content: text, CTA… -->
<span class="aurora-label">Aurora Borealis</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| rgba in linear-gradient (layer colors) | green rgba(0,255,128,.08–.10), cyan rgba(0,200,255,.12), violet rgba(100,0,255,.08–.10) | Modify the rgba values in each .aurora-layer background — each layer can have independent hues. Pink-violet theme: replace green with rgba(255,0,128,0.10). |
| filter: blur() per layer | 30 px / 40 px / 25 px | Increase to 60 px for an ultra-diffuse halo; drop to 12 px for more visible gradient shapes. Edit in .aurora-layer (default), :nth-child(2), and :nth-child(3). |
| auroraFlow duration | 8 s (layer 1) / 10 s (layer 2, reverse) / 6 s (layer 3) | Staggered durations create the phase offset mimicking aurora unpredictability. Scale uniformly (×2 = contemplative, ×0.5 = agitated). Keep all three values different — syncing them removes the interference effect. |
| auroraHue duration | 12 s (layer 1) / 15 s (layer 2) / 10 s (layer 3, reverse) | Controls hue rotation speed. 30 s+ = near-imperceptible cycle; 5 s = fast, hypnotic color shift. Vary durations between layers for independent hue cycles. |
| .aurora-stars opacity | 0.6 | 0 = clean sky with no stars; 1 = very visible stars. Also replace the at 10% 20%, 30% 70%… coordinates in the radial-gradients to customize the star field layout. |
| height of .aurora-layer | 60% / 50% / 40% | Increase for a thicker aurora curtain covering more of the scene; reduce to 20–30% for a thin horizon band. |
| .aurora-container background | #0a0a1e | Must stay dark for semi-transparent gradients to be visible. #050510 for deeper night blue; #0f0a05 for a dark desert-night ambiance. |
FAQ
requestAnimationFrame. Animations are declarative and delegated to the browser's GPU compositor. Embeddable anywhere: static HTML, Angular, React, Vue, Svelte — just copy the CSS and the three .aurora-layer divs.rgba() values of each .aurora-layer linear-gradient. Cyberpunk: swap green and violet for rgba(57,255,20,.10) and rgba(204,0,255,.10). Wintry/Arctic: keep blues, remove greens, add white-blue rgba(200,240,255,.08). No build tool needed.@media (prefers-reduced-motion) rule is present. To add it: @media (prefers-reduced-motion: reduce) { .aurora-layer, .aurora-stars { animation: none } }. The effect will remain visible as a static blurred color background — no animations will run.
