How to use the css gradient generator
- Choose linear, radial or conic.
- Set the angle (linear and conic) or the center point and shape (radial).
- Edit colour stops: change colours, drag position sliders, add stops (the new colour is blended from its neighbours) or remove them.
- Try a preset as a starting point, or toggle Repeating for stripes and rings.
- Copy the CSS, which includes a solid fallback colour.
Worked example
Diagonal teal gradient
Two stops, #0f766e at 0% and #5eead4 at 100%, at 135 degrees produce linear-gradient(135deg, #0f766e 0%, #5eead4 100%), running from the top left to the bottom right. Adding a stop places it at 50% with the blended colour between the two.
How it works
The CSS follows the CSS Images Level 3 and 4 syntax: linear-gradient(angle, stops), radial-gradient(shape at x y, stops) and conic-gradient(from angle at x y, stops), with stops sorted by position. New stops use linear RGB interpolation between neighbouring stops, matching how browsers interpolate by default.
Frequently asked questions
Is my data uploaded?
No. This tool runs entirely in your browser. Your input is processed on your device and is not sent to our server or stored.
Do I need vendor prefixes?
No. Unprefixed linear, radial and conic gradients work in all current browsers. The generated CSS includes a solid background-color as a fallback.
Why does my gradient look banded?
Large areas with close colours can show visible steps on 8-bit displays. Adding a middle stop or slightly more colour difference usually helps.
Can I use gradients in email?
Support in email clients is limited, so the solid fallback colour is what many recipients will see. For email, prefer solid colours or an image.
Limitations
- Stops use hex colours without transparency.
- Interpolation in other colour spaces (such as in oklch) is not generated.