06 / CSS / 2026-04-17
Animated Backgrounds
Ten takes on aurora, mesh, and motion wallpapers. Copy the code, steal the vibe.
How it works
// 01 DPI and pixel density
CSS-based backgrounds use `background-image` with multiple gradients layered via the comma-separated syntax, plus CSS custom properties that update over time on a `@keyframes` loop. The aurora variant has three radial gradients stacked with `mix-blend-mode: screen` and each one animates its position and size on a long loop (20 to 60 seconds). Because the whole thing is composited on the GPU, the cost is near zero.
// 02 Bleed and cut tolerance
Canvas2D backgrounds run a `requestAnimationFrame` loop that redraws the entire canvas each frame. The shape field maintains an array of objects with position, velocity, size, and color; on each tick it updates positions, checks boundary conditions, and draws shapes with fill or stroke operations. The canvas is resized to the container at device pixel ratio so the output stays crisp on retina displays. Off-screen rendering is skipped via IntersectionObserver.
// 03 Safe zone and trim accuracy
GLSL shader backgrounds draw a full-screen quad once and rely on the fragment shader to compute the color of every pixel each frame. Time is passed in as a uniform, and the shader samples noise functions (simplex, worley, or a curl noise for fluid effects) that evolve smoothly across frames. Because the entire effect runs in parallel on the GPU, a 4K fluid animation costs about the same as a 1080p version: bounded by fill rate, not geometry.
// why this exists
shader + canvas + CSS motion fluency
Animated backgrounds are the wallpaper layer of a website. Done well, they set the mood without stealing attention from the content in front of them. Done badly, they burn battery, cause layout jank, and make the page feel heavy. Ten variations here, split across CSS (cheap, universal), canvas2D (flexible, CPU-bound), and GLSL shaders (expensive, GPU-accelerated). Pick the right tool for the right job and the background becomes part of the brand instead of a tax on performance.
The CSS variants include an aurora gradient (three blurred radial gradients animating on long keyframe loops), a mesh gradient (CSS `background-image` layered with `mix-blend-mode`), a scrolling noise texture (a repeating SVG pattern with a slow `background-position` animation), and a breathing dot field (CSS custom properties plus a keyframed scale). These cost almost nothing. They render on the compositor, they respect prefers-reduced-motion, and they degrade to a static gradient when JavaScript is disabled.
The canvas2D variants include a floating shape field, a connected-particle graph (the classic every-dot-is-connected-by-a-thin-line effect), and a liquid motion blob. These cost more (roughly 2 to 5 milliseconds of CPU per frame at 1920 by 1080) but they support interaction (cursor following, click ripples) and dynamic counts that CSS cannot match. The draw loop is gated by an IntersectionObserver so the background goes to sleep when the user scrolls past.
The GLSL variants include a proper animated mesh gradient rendered as a shader (smooth transitions at any resolution), a plasma surface, and a volumetric cloud. These are the most expensive per pixel but the cheapest per effect. A shader that looks like an animated cloud runs at 60 fps on a mid-range phone because the GPU is doing all the work in parallel. A canvas2D approximation of the same effect would stutter.
Every variant is copy-pasteable. Grab the code, drop it into your project, adjust the color tokens. I use these as starting points for client hero sections, modal backgrounds, and the rare landing page that earns a real background treatment instead of a flat color.
Frequently asked questions
Do animated backgrounds hurt page performance?
CSS-based ones cost almost nothing. Canvas2D and shader-based ones cost more but stay acceptable if you gate the draw loop with IntersectionObserver. The practical test: run Lighthouse and check the Time to Interactive metric. If it regressed, switch to a cheaper technique.
CSS vs canvas vs shader, how do I choose?
CSS for passive wallpaper effects (gradients, noise, simple drifts). Canvas for interactive backgrounds (cursor following, click ripples). Shader for dense pixel effects (fluid, volumetric, per-pixel noise). Pick the simplest tool that does the job.
What is a mesh gradient?
A gradient defined by a grid of color stops blended across a 2D surface, as opposed to a linear gradient which blends along a 1D axis. CSS is getting native mesh gradient support, but today you simulate it with layered radial gradients and blend modes.
How do I make a background that responds to the cursor?
Use canvas2D, bind pointermove to the canvas, and thread the cursor position through the draw loop. For a subtle effect, pass the cursor as a uniform to a shader and let the pixel math react to distance from the cursor.
Why does my animated background drain battery on mobile?
Usually because the draw loop runs even when the background is off-screen. Gate it with IntersectionObserver. Also avoid animating layout-triggering CSS properties; stick to transform, opacity, and filter.
Can I use these backgrounds behind text?
Yes, as long as the contrast ratio stays above 4.5:1 for body copy. Animated backgrounds can make contrast hard to guarantee because the background color shifts over time. A solid overlay between the animation and the text often solves it.
What is prefers-reduced-motion and why does it matter?
A system-level accessibility preference that signals the user wants less motion. Wrap your animation rules so they are skipped when the preference is set. Visitors with vestibular conditions can get physically sick from aggressive motion.
Are CSS mesh gradients supported natively yet?
Chrome Canary and Safari Technology Preview have early implementations. Broad browser support is still a year or two out. Today, layered radial gradients with blend modes are the production-ready approach.
Can I record one of these as a video for use on other platforms?
Yes. Load the widget, use a screen recorder or the Canvas Capture MediaStream API for canvas-based ones, and export as MP4 or WebM. Shader backgrounds record cleanly because they are deterministic given a time input.
How long to build one of these for a client project?
CSS variant: 1 to 2 hours. Canvas variant: half a day. Shader variant: a full day, including tuning the uniform ranges so the effect fits the brand. The shader is not where time goes; the color and motion tuning is.