CSS Gradient Generator
Design linear and radial CSS gradients and copy the code.
CSS
Frequently asked questions
What is the difference between a linear and radial gradient?
A linear gradient blends colours along a straight line in a chosen direction, while a radial gradient blends outward from a centre point in a circular or elliptical shape. This tool can build both.
What does the angle setting control?
For a linear gradient the angle sets the direction the colours flow, where 0 degrees points upward and 90 degrees points to the right. Changing it rotates the blend across the element.
How do I use the generated CSS?
Copy the produced background or background-image rule and paste it into your stylesheet or inline style for the element you want. The gradient renders wherever that CSS is applied.
Can I pick my own two colours?
Yes. You choose the two colours and the tool blends between them, updating the preview and the CSS as you adjust them. You can also change the angle for linear gradients.
Does this tool upload anything?
No. The gradient preview and CSS are generated entirely in your browser, so nothing is sent to a server. You only copy the CSS out.
Why does my gradient look banded or striped?
Hard steps between colours or a very short blend distance can create visible bands, especially on large areas. Adjusting the colours or the angle usually smooths the transition.
Do gradients work in all browsers?
CSS linear and radial gradients are supported across all modern browsers, so the generated rule works widely without extra libraries. Very old browsers may need vendor prefixes.