Home » Developer Tools » CSS Gradient Generator
Build a linear or radial gradient with live preview, then copy valid CSS in one click.
Output is standard CSS for modern browsers. For very old browsers, add a solid fallback color from the first stop before the gradient line.
A CSS gradient is a smooth blend between two or more colors, made in code, with no image file needed. The CSS Gradient Generator lets you build one visually and copy the exact CSS for your stylesheet.
Pick linear or radial, set the angle or shape, add up to 6 color stops, and watch the preview update live. The CSS output updates with every change.
A linear gradient looks like this: background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); A radial gradient looks like this: background: radial-gradient(circle, #7c3aed 0%, #06b6d4 100%); Both are single background lines you can paste into any rule.
Yes, it is completely free with no sign up and no limits. You can build as many gradients as you like.
Valid CSS you can paste straight into a stylesheet, for example background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); for linear gradients, and the radial equivalent for radial gradients.
From 2 to 6 stops. Click Add Stop to add one, up to 6, and Remove on any stop to take it away, as long as at least 2 stops remain.
A linear gradient blends colors along a straight line set by the angle. A radial gradient blends outward from a center point, in a circle or an ellipse shape.
Yes. Sunset, Ocean, Purple Dream, and Forest are ready presets. Click one to load it, then change any color, position, angle, or shape.
The output uses standard CSS gradient syntax, which modern browsers support. Older browsers may need a fallback solid color, which you can add from the first stop color.
For picking a single color, try the Color Picker.