CSS Gradient Generator
Build linear and radial gradients with ready CSS output.
About CSS Gradient Generator
A CSS gradient renders without any image file, so it adds no network request and never softens when scaled up. This tool gives you a live preview and produces code ready to paste into your stylesheet.
How to use CSS Gradient Generator
- 1
Pick your start and end colours, and enable the third stop if you need one.
- 2
Set the gradient type to linear or radial, and adjust the angle for linear.
- 3
Watch the live preview, or hit the random button to browse fresh combinations.
- 4
Copy the generated CSS.
Frequently asked questions
Linear or radial?
Linear is the common choice for section backgrounds and buttons. Radial suits cases where light should emanate from a point, such as a glow behind a hero element.
Why does my gradient go grey and muddy in the middle?
That happens when the two colours sit far apart on the colour wheel and the path between them passes through grey. Closer hues, or adding a midpoint colour, fixes it.
What is browser support like?
CSS gradients work unprefixed in every current browser; no fallback code is needed.