Backgrounds

Animated Gradients

Aurora

Shifting northern-lights gradient that slowly drifts across the container.

Mesh Gradient

Multi-color gradient that slowly morphs between positions.

Particles / Stars

Starfield

Twinkling stars using CSS box-shadows and animation. Each layer twinkles at a different speed.

Floating Particles

Small dots that drift upward continuously.

Grid / Lines

Pulsing Grid

Grid lines that pulse in opacity, creating a subtle breathing effect.

Moving Lines

Diagonal lines that scroll continuously across the container.

Organic

Waves

Layered SVG wave shapes that animate independently.

Blobs

Morphing blob shapes that slowly change form.

Effects

Spotlight

A radial gradient glow that slowly orbits the container.

Flickering Grid

Grid cells that randomly flicker, creating a digital matrix effect.

Best Practices

1. Performance — Use will-change: transform or transform: translateZ(0) on animated layers to promote GPU compositing.
2. Reduce motion — Wrap animations in @media (prefers-reduced-motion: no-preference) so users who prefer reduced motion get a static fallback.
3. Layer count — Keep animated layers to 2–3 per background. More layers hurt mobile performance.
4. Opacity & blur — Heavy blur() filters are expensive. Use the smallest radius that looks good.
5. Contain overflow — Always set overflow: hidden on the background container to prevent scroll jank.
6. Dark containers — Most animated backgrounds look best on dark surfaces. Provide light variants if needed.