Skip to content
thehardik
Interactive CSS Lab

Gradient Builder

Compose linear, radial, and conic gradients with editable stops, positions, presets, and copy-ready CSS.

01 - Build

Gradient controls

Switch gradient types and tune angle, origin, shape, and size without losing your stops.

gradient builderlinear-gradient() · radial-gradient() · conic-gradient()
type
angle
135deg
live gradient
background: linear-gradient(135deg, #6c63ff 0%, #00d4ff 52%, #a8e063 100%);
bg-[linear-gradient(135deg,_#6c63ff_0%,_#00d4ff_52%,_#a8e063_100%)]
02 - Stops

Editable color stops

Drag stop positions, change colors, add up to six stops, and the output stays sorted by percentage.

color stop editorcolor + position + sorted output
0%
52%
100%
#6c63ff 0% #00d4ff 52% #a8e063 100%
03 - Presets

Fast starting points

Use presets as recipes, then customize every part of the gradient.

04 - Mask

Gradient text mask

The same gradient can become image fill for display text using background-clip.

mask
.headline { background-image: linear-gradient(135deg, #6c63ff 0%, #00d4ff 52%, #a8e063 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
05 - Reference

Gradient syntax notes

The useful details worth remembering when composing gradients by hand.

Linear

linear-gradient(angle, color stop, color stop)

Radial

radial-gradient(shape size at position, stops...)

Conic

conic-gradient(from angle at position, stops...)

Stops

A color stop can include any color plus a percentage or length.