React Light Waves Background
Soft ambient light waves with flowing gradients—subtle enough to be a true background that doesn't fight with content
React Light Waves Background preview
These light waves are designed to be unobtrusive. Soft colored gradients flow gently across the screen, layered with transparency so they create depth without being distracting. There are ambient glow spots that drift slowly, and wave shapes that flow across the bottom third. The whole thing feels ethereal and calming. I reach for this when I need something more interesting than a solid color but don't want to compete with the content on top. The intensity prop lets you dial it way down if needed.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the light-waves background into my projectRelated Components
Aurora Background
CSS aurora gradient
Background Beams
SVG animated beams
Background Gradient
Flowing gradient blobs
Gradient Animation
Psychedelic gradient mesh
Wavy
Noise-driven wave lines
Ripple
Expanding circle waves
FAQ
Was this page helpful?
Sign in to leave feedback.
Life
Conway's Game of Life cellular automaton background for React and Next.js — gliders, oscillators, and still-lifes evolve on a phosphor grid with glowing alive cells and fading deaths.
Lightning
Animated lightning storm background for React and Next.js — jagged electric bolts fork across the sky with bright white-blue cores, violet-indigo glow, and ambient sky flashes at each strike.