CSS gradient generator

Build a linear or radial gradient visually — pick colors, drag the stops, set the angle, and copy the CSS. Live preview, nothing is uploaded.

Gradient type
Angle90°
Color stops
CSS

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Pick your colors

Choose at least two color stops and set where each sits along the gradient.

STEP 2

Shape it

Switch between linear and radial, and set the angle for linear gradients.

STEP 3

Copy the CSS

Watch the live preview and copy the ready-to-use CSS with one click. All private.