CSS Gradient
Generate linear and radial CSS gradients with a live preview
About CSS Gradient
Turns two or more color stops into a linear or radial CSS gradient, each stop with a HEX color and a percentage position, and previews the result live as you adjust it. Linear gradients take an angle from 0 to 360 degrees, while radial ones are drawn as a centered circle. The Copy button gives a complete background declaration ready to paste into a stylesheet.
Category: Color.
Frequently asked questions
What types of CSS gradients are supported?
▾
Linear gradients at any whole-degree angle from 0 to 360, and radial gradients drawn as a centered circle with radial-gradient(circle, ...). Conic, elliptical and repeating gradients are not generated.
How do I add or remove color stops?
▾
Click Add to append a stop, with no upper limit, and use the trash icon to delete one; at least two stops always remain. Each stop has a HEX color and a position from 0% to 100%, and stops are written in list order, so keep positions increasing and give two neighboring stops the same position for a hard color edge.
Do I need to add vendor prefixes?
▾
No. The tool outputs the standard, unprefixed linear-gradient() and radial-gradient() syntax, which all modern browsers support. Prefixed -webkit- versions only matter for browsers more than a decade old.
Can I use transparent colors?
▾
Not in the editor: each stop takes a 6-digit HEX color, so every color is opaque. After copying the CSS you can edit a stop by hand, for example to transparent, an 8-digit HEX such as #6d28d980 or an rgb() value with alpha.