Mesh Gradient Background for React

Four large color orbs sit under your content, one held in each corner, each a little larger than the box, so they overlap into one continuous mesh: color in the corners and a calm blend of all four in the middle, where your copy goes. They shift and breathe so slowly you barely see them move, the soft gradient look of many product pages. Each orb is a radial gradient whose stops ease out to transparent, so it looks blurred without a blur filter, and CSS keyframes move and scale it along its own short path with transforms, which the browser composites without repainting. On a dark surface the orbs are stronger and lifted toward white, so the hues stay distinct on near-black instead of turning murky. A fine, still grain hides the color banding soft gradients show on dark screens. There's no script.

It's the safe default behind a hero or a pricing section. For bolder blobs that roam the whole box, use Gradient; for very large fields that orbit and blend into new hues, Gradient Animation; for color in drifting bands, Aurora; for grey mist instead of color, Fog. With reduced motion the orbs rest where they start.

Installation

Usage

import { MeshGradient } from "@/components/ui/mesh-gradient";

<MeshGradient className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Ship the product page</h1>
</MeshGradient>

Mesh Gradient is a container: whatever you put inside sits on top of the color, 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

Midnight

The surface is the root's own background, bg-background by default, and nothing in the orbs depends on it: className="bg-[#030014]" gives the deep indigo look. The orbs have their own dark tuning, stronger and a little lighter, where the same color would read faint and murky; the dark class here keeps that tuning and light text in both color schemes.

Colors

colors takes up to four CSS colors, one per corner from the top left, clockwise, repeated when there are fewer; here rose, amber, orange and pink. Theme variables such as var(--chart-1) make the orbs follow your theme. The orbs are sized in shares of the box, so a card gets the same composition as a full page.

Accessibility

The orbs are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion they stop where they start, and the soft color field stays. Nothing flashes.

Put copy over it in your foreground color (text-foreground). At the default intensity it stays above 6:1 on a light surface and above 4.5:1 on a dark one, at the worst moment and at any size of box; a muted color drops to about 2.5:1 over the orbs, which is too low for small text, and intensity="strong" brings everything lower.

FAQ

API Reference