shadcn registry · WebGPU · WebGL fallback · MIT free set
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.
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.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.
"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
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.
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.
Every component sits on the shadcn registry. The CLI drops typed source into your repo, yours to edit.
Glass, dither, god rays and pointer-driven pieces, plus every Pro preset and full-size exports.
Need a still or a video loop? Make one in the mesh gradient generator or the grainy gradient generator. For CSS recipes and comparisons, read the blog.
Pro adds every component and preset, bigger exports and a commercial license to your account. Pay once, or subscribe.
Regular price $249$179once
$249 after the first 50 buyers. Save $70.
$29/month
Billed monthly. Yearly saves $249.
Everything in Lifetime for your whole studio, paid once. Add teammates by email, each on their own account.
$799once
About $80 a person
Need more seats? Teams over 25 get a plan made for them.
Let's talkFree: 12 components and 39 presets, no card. Start freePricing FAQ
Start with a free component. It takes one command and needs no account.
$ npx shadcn@latest add @gradients/grain-gradient