What is gradients.sh?
gradients.sh is a library of animated GPU gradient components for React developers building visual backgrounds and interface effects. You can tune presets in its editor, then install the exact result through the shadcn CLI as source code you can read and change. The free set includes 12 MIT licensed components and 39 presets, while Pro expands the library and export limits.
Why gradients.sh works
Animated backgrounds often arrive as videos or copied snippets that are awkward to adapt once they are inside a real interface. gradients.sh renders the effect live on the GPU and copies the component source into your project, so changing the visual means editing code you own instead of working around a fixed asset.
gradients.sh features
- Installable React source. Each gradient can be added through the shadcn registry, which copies typed source into your repository so you can inspect and edit it directly.
- Preset editor. Tune a preset in the studio and install what you see, with controls such as speed, warp, grain, and blur changing the component settings.
- Live GPU rendering. Gradients render in the page through WebGPU with a WebGL fallback, and supported effects can react to pointer movement or scrolling.
- Still and video exports. The editor can export PNG images and MP4 loops. Pro supports PNG up to 16K and MP4 up to 6K or 4K60 where supported.
- Free and Pro libraries. The free tier includes 12 components and 39 presets with no card required. Pro includes 33 components and 207 presets.
Who gradients.sh is for
- React developers who want an animated background they can install as editable component code instead of embedding a fixed video.
- Frontend developers using shadcn who want visual effects that fit the same source owned component workflow as the rest of their UI.
- Designers working alongside React teams who want to tune a visual preset and hand developers the matching implementation rather than a reference image.
- Studios producing websites, product interfaces, ads, or video work that need reusable gradient components plus high resolution exports.
Similar micro SaaS ideas you can build
- Motion token generator for design systems. A tool for design system teams that turns approved motion settings into reusable React primitives, so animation decisions move from handoff notes into versioned source.
- Interactive hero effect builder. A focused editor for product marketers and frontend developers to compose pointer and scroll reactive hero effects, then export the exact implementation for a landing page.
- Brand motion asset compiler. A small app for studios that converts a brand palette and motion rules into reusable web components plus still and loop exports for presentations, ads, and product surfaces.
