Create beautiful linear, radial, and conic CSS gradients
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
Free CSS gradient generator. Build linear, radial, and conic gradients visually with a live preview. Copy the CSS code instantly. No login required.
Linear (angle-based), radial (circle or ellipse), and conic gradients are all supported.
Yes. You can add as many color stops as you need and position each one anywhere from 0% to 100%.
Copy the CSS output and paste it into your stylesheet. The output is a standard CSS background property.
Yes. Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in all modern browsers since 2021.
Yes. Use colors with an alpha channel, like rgba(255,0,0,0) or #ff000000, for transparent stops.
Last updated: January 2025