Gradient Picker

ProNew

Build a CSS gradient: linear, radial or conic, with draggable and keyboard-movable color stops, add and remove, an angle control, a color editor per stop and copyable CSS.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/gradient-picker

Usage

Exports

Export	Description
`GradientPicker`	The editor.
`gradientToCss(value)`	The `background-image` value.
`colorAt(stops, position)`	The mixed color at a position.

Props

Prop	Type	Default	Description
`value` / `onChange`	`{ type, angle, stops: { id, color, position }[] }`	-	`type` is `linear`, `radial` or `conic`; `position` is 0 to 100.
`minStops`, `maxStops`	`number`	`2`, `8`	Limits for remove and add.

Accessibility

Each stop is a role="slider" button with a name ("Stop 2 of 3, #7c3aed") and a value in percent. Arrow keys move it by 1, Shift by 10, Home and End go to the ends, Delete removes it (not below the minimum). Dragging with a pointer does the same.
Everything pointer-only has a control: the Add stop and Remove stop buttons, a number field for the exact position, and a color editor (the Color Picker Panel) for the stop color.
The preview has a text alternative ("linear, 3 stops"); the exact CSS is on screen to read, select and copy, and a status message confirms the copy.
The stop bar keeps a left-to-right layout in right-to-left pages, because it draws the gradient's own axis.

Testing

The component ships with a Testing Library test (gradient-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/gradient-picker

Usage

Exports

Export	Description
`GradientPicker`	The editor.
`gradientToCss(value)`	The `background-image` value.
`colorAt(stops, position)`	The mixed color at a position.

Props

Prop	Type	Default	Description
`value` / `onChange`	`{ type, angle, stops: { id, color, position }[] }`	-	`type` is `linear`, `radial` or `conic`; `position` is 0 to 100.
`minStops`, `maxStops`	`number`	`2`, `8`	Limits for remove and add.

Accessibility

Each stop is a role="slider" button with a name ("Stop 2 of 3, #7c3aed") and a value in percent. Arrow keys move it by 1, Shift by 10, Home and End go to the ends, Delete removes it (not below the minimum). Dragging with a pointer does the same.
Everything pointer-only has a control: the Add stop and Remove stop buttons, a number field for the exact position, and a color editor (the Color Picker Panel) for the stop color.
The preview has a text alternative ("linear, 3 stops"); the exact CSS is on screen to read, select and copy, and a status message confirms the copy.
The stop bar keeps a left-to-right layout in right-to-left pages, because it draws the gradient's own axis.

Testing

The component ships with a Testing Library test (gradient-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.