React Bokeh Background
Dreamy bokeh light effect with soft floating circles creating beautiful depth-of-field ambiance
React Bokeh Background preview
Soft, luminous circles floating gently across the screen—that beautiful out-of-focus light effect from photography. Large translucent orbs drift slowly, overlapping and blending with varying sizes that create natural depth. Some are large and close, others small and distant. The gentle movement is almost hypnotic. It's elegant, premium, and works beautifully as an ambient background. Perfect for luxury brands, photography portfolios, wedding sites, or anywhere you want that soft, dreamy aesthetic without being distracting.
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 bokeh background into my projectRelated Components
Particles
Floating particle system
Sparkles
Twinkling particles
Gradient
Flowing gradient blobs
Bubble
Floating bubbles
Aurora
Northern lights effect
Light Waves
Ambient wave animation
FAQ
Was this page helpful?
Sign in to leave feedback.
Blueprint
Architectural blueprint background for React and Next.js — a deep blueprint-blue canvas with a fine white grid and hand-drawn technical annotations that trace themselves in, hold, and fade out on a slow cycle.
Boxes
Interactive isometric grid where boxes light up in random pastel colors on hover, creating a playful 3D effect