Shadcn.io is not affiliated with official shadcn/ui
React Fog Background
Atmospheric fog effect with soft layered mist drifting slowly across a moody scene
React Fog Background preview
Soft, ethereal fog drifting through darkness—mysterious and cinematic. Large translucent layers flow horizontally at different speeds, creating that misty morning or mysterious night feeling. The effect is subtle and atmospheric, never busy or distracting. Works beautifully as an ambient layer over dark backgrounds. Perfect for luxury brands, horror themes, photography portfolios, or anywhere you want that premium atmospheric depth without overwhelming the content.
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 fog background into my projectRelated Components
Aurora
Northern lights effect
Gradient
Flowing gradient blobs
Particles
Floating particle system
Bokeh
Soft light circles
Light Waves
Ambient wave animation
Rain
Atmospheric rainfall
FAQ
Was this page helpful?
Sign in to leave feedback.
Flickering Grid
Canvas grid with randomly flickering squares that creates a subtle Matrix-like digital ambient effect
Fractal
Recursive L-system fractal tree background for React and Next.js — a self-similar branching silhouette sways in procedural wind with glowing leaf tips, built with vanilla Canvas 2D and zero dependencies.