Gradient Background for React

Five color blobs, teal, purple, blue, pink and violet, wander and overlap behind your content under a fine film grain, so the blends keep changing. Each blob is a radial gradient whose stops ease out to transparent, so it looks blurred without a blur filter. It sways on each axis at its own pace with CSS keyframes, so its path never quite repeats, and it moves with transforms, which the browser composites without repainting. Blobs are placed and sized from the component's box, not the window, so it works in a card as well as full screen. There's no script.

Use it when a hero should feel lively. For something calmer, with faint orbs that barely move, use Mesh Gradient; for something bigger, with very large fields that orbit and blend into new hues, Gradient Animation; for color in drifting bands, Aurora; for blobs that merge like a lava lamp, Metaballs. With reduced motion the blobs stand still.

Installation

Usage

import { Gradient } from "@/components/ui/gradient";

<Gradient className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Color that keeps moving</h1>
</Gradient>

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

Colors

colors takes up to five CSS colors, repeated when there are fewer; here amber, rose, orange, fuchsia and red. Theme variables such as var(--primary) work too.

In a card

intensity="subtle" pales the blobs and grain={false} removes the grain. The blobs are sized from the box, so a card gets the whole composition, not a corner of it.

Accessibility

The blobs are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion they stop where they are, and the colors stay as a still picture. Nothing flashes.

Put copy over it in your foreground color (text-foreground), the supporting lines too. Where the blobs overlap most it stays above 5:1 in both color schemes at the default intensity, but a muted color drops to about 2:1, which fails for text of any size.

FAQ

API Reference