Navigation

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. Part of the Design System Pack tooling.

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 Copy CSS toolbar
`show-controls`	boolean	`true`	Show type, angle, and space controls

Events

Event	Detail	When
`gradient-builder:change`	`{ css, stops, type, angle, interpolation }`	Any control changes

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

Design System Workflow

Use the gradient builder alongside the 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