Pro
$129/year
About $10.75 a month. Save $219 a year.
- All 33 components and 207 presets
- New components and presets as they ship
- PNG up to 16K, MP4 up to 6K or 4K60 where supported
- Commercial license for client work
- Renews yearly, cancel any time
shadcn registry · WebGPU · WebGL fallback · MIT free set
Moving gradients,
shipped as code.
gradients.sh draws backgrounds live on the GPU and ships them as React components you install with the shadcn CLI. Tune any preset, then copy the code or export a still or a loop.
Popular collections
See all
8 presets · 2 freeChromeLiquid metal rolling slowly under studio light, with hot highlights streaming along the folds.
12 presets · 3 freeSoft FoldOut-of-focus folds of light on dark or paper grounds, some with heavy film grain.
16 presets · 3 freeSilkDraped sheets of satin on a dark ground, lit along their folds with one bright hem.
15 presets · 4 freeSpectraThin arcs of light splitting into their spectrum.
20 presets · 5 freeBeamsCones of streaked light thrown from the edge of the frame: projectors, spotlights and searchlights.
20 presets · 4 freeLong ExposureOne beam of coloured light dragged across film grain, the way a slow shutter smears it.
11 presets · 1 freeFirst LightGlows rising over a dark horizon, and long skies that ramp from ink to cream.
7 presets · 3 freePolar NightAurora curtains folding over a black sky, each in one hue family.
19 presets · 4 freeNightsideThe lit edge of a planet or moon against the dark, with a thin crest of atmosphere.
Not a folder of stills.
A gradient engine you install.
Each gradient installs as a component file you own. Move a slider and the line it controls changes in that file: what you see is what you install.
Film Blue
components/gradients/film-blue.tsx
"use client";import { GrainGradient } from "@/components/grain-gradient"; const tunedProps = { speed: 1.35, warp: 0.35, grain: 0.5, blur: 0.6, seed: 22, colors: tunedColors,}; export function FilmBlue(props) { return <GrainGradient {...tunedProps} {...props} />;}npx shadcn@latest add …
Move a slider and watch its line change. Every control in the studio
Everything a moving
background needs
Live components, an editor, a library of presets, and PNG and seamless MP4 exports for slides and video. MIT for the free set, a commercial license with Pro.
Rendered live, and it reacts
A shader running in the page, sharp at any size and paused when it scrolls away. Move your cursor across it, or scroll fast and it stirs.
One command to install
Every component sits on the shadcn registry. The CLI drops typed source into your repo, yours to edit.
Pro components
Glass, dither, god rays and pointer-driven pieces, plus every Pro preset and full-size exports.
One account, every gradient.
Pro adds every component and preset, bigger exports and a commercial license to your account. Pay once, or subscribe.
Lifetime
$299once
One payment, no renewal.
- All 33 components and 207 presets
- Every future component and preset
- PNG up to 16K, MP4 up to 6K or 4K60 where supported
- Commercial license for client work
- Pay once, keep it for good
Free: 12 components and 39 presets, no card. Start freePricing FAQ
Put a live gradient in your app
Start with a free component. It takes one command and needs no account.
$ npx shadcn@latest add @gradients/grain-gradient