Fog Background for React

Banks of soft mist drift slowly across the box at three depths, each a little larger and faster than the one behind it, over a still glow near the floor, and the edges fade into the surface. Each bank is a strip of wisps, a noise texture the browser draws once from a small SVG, repeated sideways and slid by exactly one strip per loop, so the drift never jumps. The banks move with CSS transforms, which the browser composites without repainting: there's no blur filter and no script.

Use it for a moody hero, a night scene or a quiet launch card. For color instead of grey, use Mesh Gradient; for curtains of light, Aurora; for billowing plumes, Smoke; for weather that falls, Rain. With reduced motion the banks stand still.

Installation

Usage

import { Fog } from "@/components/ui/fog";

<Fog className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Out of the mist</h1>
</Fog>

Fog is a container: whatever you put inside sits on top of the mist, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Color

fogColor takes any CSS color; here a pale blue. The surface is the root's own background, bg-background by default, and nothing in the fog depends on it, so bg-slate-950 (with the dark class, for dark-surface strength and text) keeps the scene dark in both color schemes.

Low fog

fade="top" fades the mist out toward the top, so it lies low along the bottom of the card. fade also takes bottom, none, and radial, the default, which fades it toward every edge. The strips follow the box, so the wisps keep their shape at card size.

Accessibility

The fog is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the banks stop where they are, and a still mist stays. Nothing flashes.

Put copy over it in your foreground color (text-foreground), the supporting lines too. At the default intensity the densest wisp behind the text keeps it above 5:1 in both color schemes; a muted color drops to about 2:1 on a dark surface. intensity="strong" brings body text on a dark surface down to about 3.5:1, so keep it for a headline and large text.

FAQ

API Reference