Gradient Generator

CSS linear / radial / conic gradients with colour stops, preview, and copyable code

Build CSS gradients (linear, radial, conic) with custom colour stops and angles. Live preview updates as you adjust each stop; the generated CSS is ready to copy into your stylesheet.

Linear

Radial

Conic

Angle (deg)

Colour stops

Position (%)

Preset gallery

Preview

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

How to use

Choose the gradient type: linear, radial, or conic.
Add colour stops and drag them to set each colour's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

Examples

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the centre outward, shown live in the preview.