Build CSS linear, radial, or conic gradients with a live preview. Adjust colours and direction, then copy the CSS.
Choose a gradient type (linear, radial, or conic), add colour stops, adjust their positions, and see the result live. The generated CSS background property is ready to copy and paste directly into your project. Add as many colour stops as you need.
Select a gradient type, adjust the angle (for linear/conic), click colour swatches to change colours, and drag sliders to set stop positions. Click + Add colour to add more stops. Copy the CSS from the dark code block on the right.
A conic gradient rotates colours around a central point. It's useful for pie charts, colour wheels, dial effects, and any design where colour transitions in a sweep rather than a line.
As many as you like — click + Add colour to insert additional stops. The CSS is valid regardless of how many stops you use.
This tool runs entirely in your browser. Nothing you type or paste is sent to any server — all processing happens locally on your device.