CSS Gradient Generator

Build beautiful CSS gradients with a visual editor and copy the code.

Gradient Type
Angle: 90°
Color Stops
%
%
Preview
CSS Code
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

How to Use

Choose between linear or radial gradient. For linear gradients, adjust the angle with the slider. Add or remove color stops and position them along the gradient. The live preview updates instantly. When you are happy with the result, click Copy to grab the CSS code.

FAQ

Related Tools