Gradient Builder

Build linear, radial and conic CSS gradients visually. Drag color stops, copy production-ready CSS or download a PNG.

LiveRuns in browserFree

Drag stops · click the bar to add · arrows to nudge · delete to remove

Presets

Type

Angle

135°

Selected stop

55%

Code

background: #1e1b4b;
background: linear-gradient(135deg, #1e1b4b 0%, #a78bfa 55%, #f9a8d4 100%);

Download PNG

How it works

Step 01Pick a preset or start fresh, then choose linear, radial or conic.
Step 02Drag stops along the bar, click the bar to add one, and fine-tune colors and angle.
Step 03Copy the CSS straight into your stylesheet or download the gradient as a PNG.

Built on CSS (Web standard). Your files are processed on your device and are never uploaded.