CSS Gradient
Linear, radial and conic gradients with live preview.
Color stops
background: linear-gradient(90deg, #7aa2ff 0%, #b48cff 50%, #63e6ff 100%);
About the CSS Gradient
Design CSS gradients visually with support for linear, radial and conic types, multiple color stops, and live preview. The tool outputs clean, production-ready CSS you can paste straight into a stylesheet, with an angle dial for linear and conic gradients.
How to use the CSS Gradient
- Choose the gradient type: linear, radial or conic.
- Set the angle with the slider (linear and conic only).
- Edit the color stops โ click a color swatch to change it, drag its position slider, or add up to six stops.
- Copy the generated CSS from the output panel, or randomize to explore combinations.
CSS Gradient FAQ
Which gradient types are supported?
Linear gradients (with a 0โ360ยฐ angle), radial gradients radiating from the center, and conic gradients rotating around a point. Each type produces the corresponding CSS function with your stops.
Will the CSS work in all browsers?
The output uses standard CSS functions โ linear-gradient, radial-gradient and conic-gradient โ supported by every modern browser. No vendor prefixes are needed today.
Can I use more than two colors?
Yes, up to six color stops. Click "Add stop" to append one at 100%, then drag its position slider to place it between the others.