CSS Gradient Generator

Gradients add depth to backgrounds and buttons without any images. Pick a gradient type, set the colours and stop positions with the visual controls or a preset, then copy the CSS straight into your stylesheet.

How to use

1. Pick a gradient type (linear, radial or conic) and adjust the angle for linear/conic.
2. Change stop colors with the color pickers and positions with the sliders. Add up to 4 stops.
3. Or click any preset to load it instantly.
4. Copy the generated CSS and paste it into your stylesheet.

Tips

• Two or three stops usually look cleaner than many; add stops only where the blend needs help.
• Check the gradient on a real phone screen - colours shift between displays.
• Keep enough contrast where text sits on top of the gradient.
• Save the CSS in a variable or utility class so you can reuse it across pages.