Aurora Effect
Pure-CSS aurora borealis background — two oversized pseudo-elements carrying radial gradients in violet/cyan/pink drift slowly over a night-sky base, with 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. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
.bg-aurora-new sets a dark 45° gradient base (three night blue-indigo tones) and declares overflow: hidden to clip overflowing layers. No canvas, no JS — the effect relies entirely on native CSS properties.
::before and ::after are sized at 200% × 200% of the container — this margin ensures no gradient edge is visible regardless of the animation position. Each carries a background made of three stacked radial-gradient: violet (rgba(120,0,255,.3) anchored at 20% horizontal), cyan (rgba(0,255,200,.3) at 80%), and pink (rgba(255,0,150,.2) at bottom center). These color poles evoke the spectral bands of a real aurora.
Both pseudo-elements share @keyframes auroraNew: from translate(-10%,-10%) rotate(0deg) to translate(10%,10%) rotate(10deg), over 15s ease-in-out infinite alternate. The alternate direction creates a seamless back-and-forth drift. The ±10% amplitude (in the pseudo-element's own coordinates, i.e. ±20% of the container width) is enough to ripple the aurora across the entire visible surface.
The double stacking of the two identical layers reinforces color opacity through natural CSS compositing: areas where the gradients coincide appear deeper and brighter, mimicking the variable density of a real aurora with no pixel-by-pixel computation.
Accessibility
- prefers-reduced-motion not implemented: the code contains no
@media (prefers-reduced-motion: reduce)rule — the animation always runs, even for users who have disabled it at the OS level. Add manually:@media (prefers-reduced-motion: reduce) { .bg-aurora-new::before, .bg-aurora-new::after { animation: none; } }if your context requires it. - Purely decorative effect: add
aria-hidden="true"to.bg-aurora-newif no functional content lives inside — screen readers have nothing to read on a CSS background. - If you overlay text, it stays in the DOM and is read normally by assistive technologies, independently of the animated background.
- Text contrast: white (
#fff) over a dark aurora base (luminance ~6%) — ratio > 7:1, WCAG AA and AAA compliant. - No keyboard interaction or focus state to manage — the effect exposes no native buttons or clickable zones.
Browser compatibility
Uses only CSS pseudo-elements, radial-gradient, and keyframes — available in all modern browsers since 2015.
Without CSS animations (very old browser or <code>animation: none</code> forced), the dark gradient background remains visible — no JS errors, no broken layout.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bg-aurora-new" aria-hidden="true">
<!-- ::before and ::after are CSS-generated — no extra tags -->
<!-- Optional overlay: place your text or component here -->
<div style="position:relative;z-index:1">
Your content
</div>
</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 |
|---|---|---|
| Aurora colors (rgba inside ::before/::after) | violet rgba(120,0,255,.3), cyan rgba(0,255,200,.3), pink rgba(255,0,150,.2) | Replace the three radial-gradient colors to change the palette — e.g. blue/green for a nordic feel, orange/pink for a warm version. |
| animation-duration (15s) | 15s | Shorten to 6–8s for a more dynamic aurora; lengthen to 25–30s for an ultra-contemplative background. |
| Translate amplitude (±10%) | translate(-10%,-10%) → translate(10%,10%) | Increase to ±20% for more visible sweep on large screens; reduce to ±5% for a near-static vibration. |
| Rotate amplitude (0–10deg) | 0deg → 10deg | Raise to 0–20deg for a more dramatic rotation; set to 0deg to remove torsion and keep a purely linear drift. |
| Base background (on .bg-aurora-new) | linear-gradient(45deg, #0a0a1a, #1a0a2a, #0a1a2a) | Change the three hex tones to shift the base toward deep navy, night red, or pure black — the aurora palette will brighten or darken accordingly. |
| Gradient alpha opacity | 0.3 (violet/cyan), 0.2 (pink) | Raise to 0.5–0.6 for a clearly brighter aurora; lower to 0.1 for a very subtle, almost ghostly effect. |
FAQ
radial-gradients, and a single @keyframes. No JS to load, no npm dependency, no event wiring. Copy the HTML and CSS and the aurora runs immediately in any page or framework..bg-aurora-new::before, .bg-aurora-new::after, replace the rgba(…) values in the three radial-gradient declarations. The first controls the left hue, the second the right hue, the third the bottom base. The fourth parameter (alpha, e.g. .3) sets the intensity of each band..bg-aurora-new with position: relative; z-index: 1. For readability, add a dark text-shadow or a semi-transparent scrim (background: rgba(0,0,0,.45) as position: absolute; inset: 0 before your content).
