Gradient Builder: React + Tailwind Component

Edit gradients by dragging color stops, with an angle dial, one-click CSS copying, and a preset library.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/gradient-builder.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Show the preset libraryshowPresets

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<GradientBuilder/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/gradient-builder.en.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 "Twilight" 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

Gradient Builder