CSS Gradient Generator
Create beautiful CSS gradients visually. Linear, radial, and conic gradients with multiple color stops. Copy the CSS code instantly.
Frequently asked
questions
A CSS gradient is a smooth transition between two or more colors applied as a background image. Linear gradients go in a direction, radial gradients spread from a point, and conic gradients rotate around a point.
Yes — CSS gradients are set with background: or background-image:. They can be applied to any element. They are resolution-independent (unlike image files) and load instantly with no HTTP request.
Linear and radial gradients are supported in all modern browsers and IE10+. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and are not supported in IE.