CSS Gradient Generator

Build CSS gradients with a live preview

Pick a linear or radial gradient, set the angle, and add as many color stops as you like while a big preview updates live. Copy the ready to paste background CSS in one click, or start from a preset. It all runs entirely in your browser, with no login or backend.

Gradient type

Angle90°

Color stops

#ff0080%

#7928ca%

Preview

CSS

background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);

Tip: runs entirely in your browser, nothing is sent anywhere. Pick linear or radial, drag the angle, and add or remove color stops; the CSS updates live and copies in one click.

Presets