Design linear, radial, and conic CSS gradients with a live preview.
Design beautiful linear, radial, and conic CSS gradients with a live preview. Pick your colors, position multiple stops, tweak the angle or shape, and copy the production-ready CSS. Everything runs locally in your browser — no signup, no tracking, no upload.
Choose a gradient type
Switch between Linear, Radial, and Conic. Each type exposes its own controls — angle for linear, shape and position for radial, starting angle and position for conic.
Add and tune color stops
Use the color picker or type a hex value for each stop, then set its position in percent. Add as many stops as you need (minimum 2) and remove the ones you don't.
Copy the CSS
The preview and the CSS code block update in real time. Click Copy to grab the background declaration and paste it straight into your stylesheet.
Linear and radial gradients are supported in every modern browser. Conic gradients are supported in all current evergreen browsers (Chrome, Edge, Firefox, Safari).
This tool uses 6-digit hex values. For transparency, apply an opacity modifier in your CSS (e.g. wrap the element in a parent with opacity) or switch the output to rgba() manually.
Yes. For linear gradients, 0deg points upward and angles increase clockwise, matching the current CSS Images Module specification.
Yes. The output is a standard background declaration with no vendor prefixes needed for the modern browsers this tool targets.