Five radial-gradient blobs across two CSS pseudo-elements, two offset animations: a green, cyan and purple aurora borealis background — zero JavaScript.
CSSAnimationOrganic
AURORA
Hover or click the scene to interact
This effect is free — the Backgrounds category contains 50 effects total, including 6 free. Effect.Labs has 811 vanilla effects. Explore the category →
Design, prototype and ship faster with an AI-powered workflow.
① Full-screen hero — Dark SaaS landing page
WhenA dark-themed landing page hero section presents a tech product, app or cloud offer across the full viewport height.
WhyThe aurora covers a large surface and the glowing layers ripple in the background without overwhelming the text. The green/cyan/purple palette signals technological innovation without over-decorating.
SettingsStretch .aurora-mesh to width: 100%; height: 100vh; border-radius: 0. Overlay title and CTA in an absolutely positioned div. Increase filter: blur() to 45px / 40px and inset to -30% for large viewports.
Deep Sleep — Session in progress
32:14
Breathe slowly…
② Sleep & meditation app — Full-screen ambient background
WhenA wellness or sleep application (Endel, Calm style) displays an animated full-screen background during meditation or guided sleep sessions.
WhyThe cool green-cyan-purple layers create a calming nocturnal atmosphere across the full surface; the large canvas lets the undulations exist fully — the five radial gradients read beautifully on a full-bleed background but get lost in a compact card.
Settingswidth: 100%; height: 100vh; border-radius: 0 on .aurora-mesh as position: absolute; inset: 0. Increase durations to 14s / 18s for ultra-slow drifting suited to meditation. Raise filter: blur() to 50px / 45px for an ultra-soft glow. Reduce rgba opacities by 15–20 % for an even more subdued atmosphere.
Technology
How AI is reshaping creative workflows in 2026
5 min read·22 août 2026
③ Editorial header — Blog article or dark newsletter
WhenA tech blog post, dark-mode newsletter or documentation page uses a header banner before the body text.
WhyThe soft gradient glow replaces an illustration image with zero network requests. The effect stays understated and keeps the article title readable over the gradient scrim.
Settingswidth: 100%; height: 200px; border-radius: 0. Reduce filter: blur() to 20px / 18px to preserve subtle definition of the colour layers in a narrow horizontal format.
How it works
The effect relies on two CSS pseudo-elements (::before and ::after) applied to .aurora-mesh. Each pseudo-element stacks multiple positioned radial gradients (radial-gradient(at X% Y%, …)) — five on ::before (vivid green, cyan, purple, teal, aqua) and three on ::after (aqua, cyan, saturated purple). The at X% Y% coordinates place the light sources and spread them in a constellation across the full surface.
A filter: blur(30px) on ::before and blur(25px) on ::after dissolves the hard gradient edges into an atmospheric glow. The inset: -20% extends each pseudo-element beyond the container so that the animations' translate and scale transforms never expose the dark background at the edges — the overflow is hidden by overflow: hidden on .aurora-mesh.
The two layers run on different durations (auroraDrift 8 s, auroraDrift2 10 s), with animation-direction: alternate and ease-in-out. 8 and 10 share no simple frequency ratio: their LCM is 40 s, the time before the exact pattern repeats. This phase offset generates organic, unpredictable motion without any code. The keyframes combine translate, scale and rotate at low amplitude (±8%, ±1.08, ±3°) for a natural ripple.
The effect is 100% CSS: no requestAnimationFrame, no canvas, no script. It encapsulates into a component, a card or an entire section without touching the host code — a single <div class="aurora-mesh"> is enough, and multiple instances on the same page work independently.
Accessibility
prefers-reduced-motion not handled natively: the provided code contains no @media (prefers-reduced-motion: reduce) block. For production use, add .aurora-mesh::before, .aurora-mesh::after { animation: none; } inside that media-query — the aurora then renders as a static, coloured background with no motion.
The base code defines no role or aria-label on .aurora-mesh. For a purely decorative background, no role is needed. Any text you layer on top stays in the DOM flow and is read normally by screen readers.
The .aurora-mesh-label color is rgba(255,255,255,0.9) against background rgb(10,10,15) — contrast ratio above 15:1, WCAG AAA compliant.
The effect defines no interactive elements. Any CTA you add to an overlay must remain in the normal tab order; the CSS background creates no keyboard barrier.
No flickering or flash (no steps(), no abrupt brightness alternation) — no intrinsic photosensitivity risk. The infinite animation duration still needs to be addressed via prefers-reduced-motion (see point 1).
Browser compatibility
Requires CSS animations and filter: blur() — supported in all modern browsers. Zero external dependencies.
Chrome 88+✓ Full
Firefox 87+✓ Full
Safari 15+✓ Full
Edge 88+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full
Without <code>filter: blur()</code> support (IE 11), gradients render without the blur — the effect remains colourful but loses the atmospheric glow. No JS errors, the page stays functional.
The code
Copy the three blocks into your page. No dependencies.
green #00ff80, cyan #00dcff, purple #a000ff, teal #00b4c8, aqua #00ffb4
Modify the rgba(R,G,B,opacity) values in the five radial-gradient layers of .aurora-mesh::before. Each blob is independent — reduce to 3 layers for a more monochrome effect, or add a warm hue for a space sunset look.
::after radial-gradient colors
aqua #50ffc8, cyan #00c8ff, purple #7800ff
The three blobs in ::after blend with ::before by layering. Desaturate them or swap in pink/orange tones for a warmer aurora.
::before animation — duration
8s
Increase to 14s for an ultra-slow drift (meditation, ambient art) or reduce to 4s for energetic motion. Keep a non-integer ratio with the ::after duration to preserve the organic feel.
::after animation — duration
10s
Duration of auroraDrift2. Together with the ::before duration, it determines how long before the pattern repeats (LCM of both values). Coprime durations (e.g. 7s / 11s) make the cycle even more unpredictable.
filter: blur()
30px (::before), 25px (::after)
Reduce to 12px / 10px for more defined blob edges (plasma look). Increase to 50px / 45px for an ultra-soft glow suited to large-format use.
inset
-20%
Overflow margin of the pseudo-elements. On very large containers (full screen), increase to -30% to prevent the scale animations from exposing dark corners.
.aurora-mesh background
rgb(10, 10, 15)
Base background visible beneath the blobs and as fallback. Match your dark brand tone (e.g. rgb(5,5,20) for midnight blue, rgb(15,5,10) for deep purple night).
FAQ
How do I adapt Aurora Mesh to a full-screen section?
Replace the defaults width: 320px; height: 220px with width: 100%; height: 100vh. Add border-radius: 0. For a full-bleed background, position .aurora-mesh as position: absolute; inset: 0 inside a position: relative parent. Also increase filter: blur() to 50px / 45px and inset to -30% so the animations don't expose edges on large screens.
Why does the motion look random with only two animations?
The two layers (::before and ::after) run at 8 s and 10 s with animation-direction: alternate. The exact pattern only repeats after 40 s (LCM of 8 and 10). Their keyframes combine translate, scale and light rotation at different proportions: the interference between the two superimposed movements mimics organic motion without any random-number generation.
How do I add prefers-reduced-motion support?
The provided code does not handle this media-query. Add this block after the @keyframes: @media (prefers-reduced-motion: reduce) { .aurora-mesh::before, .aurora-mesh::after { animation: none; } }. The aurora then renders as a static, coloured background — users sensitive to motion see a still gradient with no transitions.
