Grain Gradient Background

ProNew

A shifting three-colour gradient with film grain over it, drawn with an inline SVG noise filter.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/grain-gradient-background

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`18`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/grain-gradient-background

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`18`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.