<gradient-builder>
Interactive CSS gradient builder with color stops, angle control, interpolation space selection, and one-click CSS export.
Overview
The <gradient-builder> component creates interactive CSS gradients with a live preview strip, color stop management, angle and type controls, and color space selection. Export the result as a CSS linear-gradient() or radial-gradient() value. Companion to <palette-generator> for exploring color relationships.
Basic usage
<gradient-builder colors="#6366f1,#ec4899" show-export></gradient-builder>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
colors |
string | #6366f1,#ec4899 |
Comma-separated initial stop colors. |
type |
string | linear |
linear or radial. |
angle |
number | 90 |
Gradient angle in degrees (linear only). |
interpolation |
string | oklab |
Color space: oklab, oklch, srgb. |
show-export |
boolean | — | Show the Copy CSS toolbar. |
show-controls |
boolean | true |
Show type, angle, and color space controls. |
Color spaces
The interpolation dropdown controls which color space the browser uses to blend between stops:
- oklab (default) — perceptually uniform, avoids muddy mid-tones. Best for most gradients.
- oklch — perceptually uniform in polar coordinates, produces vibrant hue shifts.
- sRGB — traditional browser interpolation. Can produce desaturated mid-tones.
Examples
Three-stop sunset gradient
<gradient-builder colors="#f59e0b,#ef4444,#8b5cf6" angle="135" show-export></gradient-builder>Radial gradient
<gradient-builder colors="#06b6d4,#3b82f6,#8b5cf6" type="radial" show-export></gradient-builder>OKLCH interpolation for vivid hue shift
<gradient-builder colors="#ef4444,#3b82f6" interpolation="oklch" show-export></gradient-builder>Events
| Event | Detail | Description |
|---|---|---|
gradient-builder:change |
{ css, stops, type, angle, interpolation } |
Fires whenever a control changes — type, angle, color space, or any color stop. |
Design system workflow
Use the gradient builder alongside <palette-generator> to explore color relationships:
- Generate a palette from a seed color.
- Use palette colors as gradient stops.
- Adjust the angle and color space for the desired effect.
- Copy the CSS and paste into your theme or component styles.
Accessibility
- Angle and color-stop position controls are native
<input type="range">elements, keyboard-adjustable via arrow keys. - Type and color-space controls are native
<select>elements. - Add / remove stop and copy actions are real
<button type="button">elements. - The current angle and stop position are echoed as text next to each slider — not conveyed by position alone.