Gradient Background
betaA full-bleed animated gradient in three moods — a slow linear pan, swaying aurora ribbons or an orbiting mesh — with optional SVG film grain and a pointer-following light.
- Effects & motion
- 1 file
- 2 npm packages
- Accessibility notes
- Animates with motion
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add gradient-backgroundnpm packages installed: class-variance-authority, motion.
import { GradientBackground } from "@/components/ui/gradient-background";Default
Variants
Aurora
Linear Banner
<GradientBackground>
| Prop | Type | Default |
|---|---|---|
colorsGradient colours as CSS colour expressions built from tokens, e.g. | string[] | DEFAULT_COLORS |
grainOverlays a fine film grain (SVG noise) on the gradient. | boolean | false |
interactiveAdds a soft light that follows the pointer on a spring. | boolean | false |
layerClassNameClasses for the decorative layer. | string | — |
speed | "slow" | "normal" | "fast" | "normal" |
variant | "linear" | "aurora" | "mesh" | "linear" |
Plus every attribute of <div>.
The gradient, grain and pointer light are decorative: one aria-hidden layer with pointer-events none that adds no role or tab stop. Children render above it in their own layer and stay fully interactive — the pointer is read from the root as events bubble, never captured. Text over the gradient needs its own contrast (a card or a scrim), since the colours move behind it. Under reduced motion every loop stops and each variant rests in a composed still layout, and the pointer light is not rendered; its spring is wrapped in MotionConfig reducedMotion="user". Touch input is ignored.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes