Gradient Mesh & Aurora Backgrounds

When to use this

• You need an animated gradient background with organic, shifting color blobs.
• The design calls for an "aurora borealis" or "northern lights" effect.
• You want a mesh gradient (multiple color nodes blending smoothly) that CSS linear/radial gradients cannot achieve.
• The background must feel alive but not distracting -- slow, ambient motion.
• Do NOT use this for sharp geometric gradients or simple two-color transitions -- plain CSS linear-gradient is simpler and cheaper.

Mental model

A mesh gradient is a color field defined by multiple control points, each with a position and color. Colors blend smoothly between points based on distance. CSS has no native mesh gradient. The three implementation paths:

Multi-radial CSS: Stack several large radial-gradient circles with transparent edges, each a different color, at different positions. Animate positions with CSS transforms. This is the cheapest approach, runs entirely on the compositor, and is surprisingly effective for 3-5 color nodes.

Animated blur blobs: Place 3-5 large colored div elements, blur them heavily (filter: blur(80-150px)), and animate their positions slowly. The blur causes them to blend visually. This is the technique Stripe, Vercel, and most "premium gradient" sites use. GPU-composited, smooth, easy to implement.

Canvas/WebGL shader: For full control, render a fragment shader that computes color at each pixel from multiple control points using smooth distance falloff. This allows true mesh interpolation, animated noise perturbation, and unlimited color nodes. Overkill for most use cases.

The aurora effect specifically is animated blur blobs with elongated, rotated shapes and slow sinusoidal motion. The "lights" are just very large, very blurry ellipses drifting horizontally.