Frosted Aurora
Three aurora ribbons — green, blue, violet — drawn on canvas as sine waves added together in lighter mode, softened by a 22 px CSS blur, rippling endlessly behind a frosted glass panel (16 px blur, 150% saturation); a single still frame when the user reduces motion.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
Two layers in a 16/10 scene (.fa-scene, 14 px corners, #05060f background). Underneath, a <canvas class="fa-canvas"> filling the whole scene. On top, the .fa-glass panel: min(70%, 320px) wide, 22 px corners, a white gradient from 14% to 4%, a white rim at 25%, backdrop-filter: blur(var(--fa-blur, 16px)) saturate(150%), a drop shadow and an inner highlight, centered text with drop shadows. The 16 px blur is strong: behind the panel, the aurora is only diffuse light, that is the “frost”.
The script draws three ribbons. Each has a color (60,220,170, 90,150,255, 180,110,255), a height (42, 52 and 60% of the scene), an amplitude (10, 13 and 9%), a frequency (2.1, 1.6 and 2.6 waves across the width) and a speed (0.18, 0.13 and 0.22 radians per second). For each frame it traces the ribbon's top edge as a sine curve in steps of max(6, width ÷ 48) px, comes back along a bottom edge offset by 22% of the height, and fills it with a vertical gradient transparent → 55% → transparent. The three ribbons are added together (globalCompositeOperation = "lighter"): where green and blue cross, the light brightens like a real aurora. The different speeds mean the figure almost never repeats; at these speeds a full ripple takes 29 to 48 s, a slow motion, barely noticeable from one second to the next.
The ribbons' blur is a CSS filter: blur(22px) set on the canvas, not a ctx.filter inside the drawing: WebKit ignores ctx.filter without an error — measured in WebKit 26 (Safari's engine), you would only get three wavy bands with sharp edges instead of an aurora. In CSS, rendering is the same in Chromium, the aurora is soft in WebKit, and Firefox does not have to recompute the blur inside the canvas every frame (headless, 23 frames per second with ctx.filter, 121 with the CSS filter). Resizing a canvas clears it: under reduced motion, the resize handler therefore redraws the still frame. When the user asks for less transparency, or if the browser does not know backdrop-filter, the script adds .fa-solid to the scene; -webkit-backdrop-filter serves Safari before version 18. The script starts one loop per .fa-canvas, each at its own size: several auroras can share a page (remove the faScene and faCanvas ids when you duplicate the block). An older variant of this aurora also exists in the category.
Accessibility
- Reduced motion: under
prefers-reduced-motion, the script draws a single frame (time 0) and does not start the loop — measured, two canvas readings one second apart are identical. The aurora stays visible, still, including after the window is resized (a phone turning): the script then redraws the still frame, measured in Chromium and Firefox. - Reduced transparency and no blur: the script sets
.fa-solidwhenprefers-reduced-transparency: reducematches or when neitherbackdrop-filternor its prefixed form are known. Measured under emulation in Chromium: solid#11142apanel, rim at 40%, aurora lowered to 35% opacity. Firefox 153 and WebKit 26 do not know this transparency setting yet. - Contrast: on this dark background white text holds well. Without its drop shadows, measured on the panel at six moments: 8.81:1 median, 3.18:1 on the lightest area, when the green ribbon passes behind. The 13 px text therefore drops below 4.5:1 in places: keep the shadows (
text-shadowat 55%) or raise the panel gradient to 25% black. - Semantics: the canvas is decorative — add
aria-hidden="true"so it is not announced as an empty image. The panel is adivwith anh3and a paragraph: replace them with your content's real structure (form, link, page heading).
Browser compatibility
Canvas 2D + CSS (filter, backdrop-filter) + 2.1 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26: same ribbons, same animation, same still frame under reduced motion; a soft aurora everywhere thanks to the CSS blur. The panel's frost shows in all three (real screen capture for Firefox and WebKit, whose automated captures never show backdrop-filter). The canvas is sized to the scene on load and on every window resize, without accounting for screen density: on a Retina screen it is upscaled twice, which the 22 px blur makes invisible.
Without backdrop-filter, the script sets .fa-solid: a solid midnight-blue panel, the aurora dimmed behind, text still readable. Without JavaScript, the canvas stays empty and the scene keeps its #05060f background: the panel stays readable on a flat background, with no aurora. Without CSS filter (very old browsers), the ribbons show with sharp edges.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="fa-scene">
<canvas class="fa-canvas"></canvas>
<div class="fa-glass">
<h3>…</h3>
<p>…</p>
</div>
</div>
</div>The full HTML + CSS + JS of Frosted Aurora, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Speed (JS — i(o, (r - n) / 1e3 * 1)) |
× 1: one ripple in 29 to 48 s | Replace * 1 with * 3 for a lively aurora (the scenes' setting), * 0.5 for an almost still background. |
Ribbon colors (JS — color: "60,220,170"…) |
green, blue, violet | Three red, green, blue components without spaces. For a pink aurora: "255,110,170". In lighter mode, two complementary colors that cross turn white. |
Ribbon shape (JS — y, amp, freq, spd, phase) |
heights 0.42 / 0.52 / 0.6, amplitudes 0.1 / 0.13 / 0.09 | y places the ribbon (0 = top), amp sets the wave height, freq their number across the width. Add a fourth object to the array for a fourth ribbon. |
Ribbon thickness (JS — l = .22 * i) |
22% of the scene height | 0.12 gives thin veils, 0.35 wide sheets that cover the scene. |
Aurora blur (CSS — .fa-canvas { filter: blur(22px) }) |
22px | 12 px shows the wave crests, 40 px melts the ribbons into a glow. The CSS blur is computed by the graphics card, not by the script. |
Panel frost (CSS — --fa-blur) |
16px | 8 px lets the ribbons show behind the text, 24 px keeps only their color. The variable feeds both declarations, with and without prefix. |
Solid fallback (CSS — .fa-scene.fa-solid) |
#11142a panel, aurora at 35% | To force the fallback on a given page (print, battery saving), add fa-solid to .fa-scene yourself. |
FAQ
IntersectionObserver that toggles a flag read at the start of each frame.resize event. If the scene changes width without the window moving (sidebar, tabs, accordion), the drawing is stretched. Replace window.addEventListener("resize", t) with a ResizeObserver on the canvas: new ResizeObserver(t).observe(r).-webkit- form for Safari before 18. Prefer Frosted Aurora for an aurora that really ripples; Aurora Glass stays lighter if you want zero JavaScript.
