Gradient Builder
Edit gradients by dragging color stops, with an angle dial, one-click CSS copying, and a preset library.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A large live preview paired with a draggable color-stop track — double-click the track to add a stop, drag one downward to remove it, and click a stop to open the system color picker. The angle dial supports switching between linear and radial, the CSS gradient string is generated live for one-click copying, and 6 curated presets are built in.
npx shadcn@latest add "https://webberui.com/r/gradient-builder.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<GradientBuilder />
Installation
npx shadcn@latest add "https://webberui.com/r/gradient-builder.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/gradient-builder.
Usage
import {
GradientBuilder,
gradientToCss,
} from "@/components/ui/gradient-builder";
<GradientBuilder
defaultValue={{
type: "linear",
angle: 135,
stops: [
{ id: "a", color: "#06b6d4", position: 0 },
{ id: "b", color: "#7c3aed", position: 100 },
],
}}
onChange={(value) => console.log(gradientToCss(value))}
/>GradientValue has the shape { type: "linear" | "radial", angle: number, stops: GradientStop[] }, where each GradientStop is { id, color, position }. The gradientToCss(value) helper and the built-in GRADIENT_PRESETS library are also exported so you can reuse them outside the component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | GradientValue | — | The gradient value in controlled mode; once provided, state is owned outside |
defaultValue | GradientValue | the built-in "暮光" gradient | Initial gradient value in uncontrolled mode |
onChange | (value: GradientValue) => void | — | Fires on any edit (dragging, picking a color, turning the angle, applying a preset) |
presets | GradientPreset[] | 6 curated built-ins | A custom preset library |
showPresets | boolean | true | Whether to show the preset library at the bottom |
className | string | — | Forwarded to the outer panel and merged with the built-in styles |
Double-clicking can add up to 8 stops; with only 2 stops left, none can be removed, which keeps the gradient always valid.
Accessibility
- Both the color stops and the angle dial are
role="slider": stops support ←/→ to nudge their position (Shift to accelerate) and Delete / Backspace to remove; the dial supports arrow keys ±5° (Shift ±15°) plus Home / End - Each stop contains a native
input type="color", so clicking it or focusing it from the keyboard opens the system color picker - The copy button has a dynamic
aria-label(copy CSS / copied), and on success the icon switches and reverts after 1.6 seconds - With "reduce motion" enabled, the spring scaling and hover animations are disabled; dragging itself is unaffected
Palette Generator
Take one primary color and derive a harmonious palette from it, with flip-card swatches, one-click copying, and lock-and-reroll.
Cart Arc
An arc into the bag — clicking add-to-cart sends the product thumbnail flying along a bézier arc toward the cart, where the icon squashes like jelly and the badge number pops as it increments; rapid clicks send several in flight at once.