Gradient Animation Background for React

Six very large, very soft fields of indigo, violet, sky, rose and purple orbit slow, off-center points over the whole box, overlapping so their hues blend into new ones: pastel on a near-white wash in light mode, luminous and added together on deep indigo in dark mode. Each field is one element the size of its gradient, whose stops ease out to transparent, so there's no edge anywhere and no blur filter; it turns about a point below its center while it sways, with CSS transforms, which the browser composites without repainting. A fine, still grain hides the banding soft gradients show on dark screens. There's no script unless you turn on the pointer field.

Use it behind a hero, a launch page or a portfolio. For the same idea as separate blobs on a plain surface, use Gradient; for calm color anchored in the corners, Mesh Gradient; for broad fields of color under a satin sheen, Silk; for color that merges like a lava lamp, Metaballs. With reduced motion the fields stand still.

Installation

Usage

import { GradientAnimation } from "@/components/ui/gradient-animation";

<GradientAnimation className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Turn it up</h1>
</GradientAnimation>

Gradient Animation is a container: whatever you put inside sits on top of the color, in normal flow, in your foreground color. 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 a dusk of coral, amber, rose, peach and plum. interactive adds one more soft field that glides after the mouse or pen, and pointerColor sets its color, here a warm amber.

Calm

intensity="subtle" pales the fields and speed={0.5} halves the pace: a quieter version for a card. The fields are sized from the box's longer side, so they fill a card as they fill a page.

Accessibility

The color is decoration: it's hidden from assistive tech and lets every click through to your content. The pointer field follows a mouse or pen only, so touch scrolling stays smooth, and it fades out where the pointer leaves. With reduced motion every field stops where it is, spread out as a still picture, and the pointer field is hidden. Nothing flashes, and the orbits take 27 to 44 seconds.

Put copy over it in your foreground color (text-foreground). At the default intensity it stays near 4.5:1 or above at the worst moment in both color schemes, in a page, a card or a phone hero; in a wide, short banner, where the fields crowd the middle, keep it to large text. intensity="strong" brings it lower, so keep small text off it there, and check again with your own colors.

FAQ

API Reference