Gradient Background

Slowly shifting gradient. Pro · Effects › Backgrounds

A slow, endless mesh gradient behind content: an oversized layer of close, muted colours pans back and forth on the compositor (transform only) while its soft glows drift on their own, longer rhythm, so the light never retraces one path; a fine still grain keeps wide areas free of banding. The default palette comes from the theme's accent mixed into the page colour, so theme text stays readable on it. Pauses off screen and in a hidden tab; still under reduced motion. With strong custom colours, check the contrast of the text on top or put it on a surface.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add gradient-background

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GradientBackground } from 'valyro-ui-pro';

Props

Prop	Type	Default
`duration`	`number`	`15`	Seconds for one pass across the gradient; it then eases back (default 15).
`colors`	`readonly string[]`		Colours of the gradient; the second also tints the drifting glows (default: the theme's `--ui-gradient-background-stops`).
`angle`	`number`	`135`	Direction of the gradient, degrees (default 135).
`grain`	`number`	`0.4`	Fine film grain over the gradient, 0–1: hides banding on large soft areas (default 0.4; 0 turns it off).

Related components

Aurora Background — Slow aurora behind your content
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail
Hole Background — Portal tunnel with rings and particles
Fireworks Background — Fireworks for wins and achievements, launch on click
Spotlight — Stage beams and a cursor spotlight
Meteors — Falling meteors
Background Pattern — Fading dot, grid and line backgrounds
Particles — Particle field that reacts to the cursor
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states

Previous: Aurora Background · Next: Bubble Background · All Effects