Design Tool
CSS Gradient Generator
Create beautiful linear and radial gradients, preview them live, and copy production-ready CSS in seconds.
135°
Color 10%
Color 2100%
Live preview
Your gradient updates instantly as you change the settings.
Generated CSS
background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);Help & answers
Frequently Asked Questions
What is a CSS gradient?+
A CSS gradient creates a smooth transition between two or more colors without requiring an image file.
What is the difference between linear and radial gradients?+
Linear gradients transition colors along a straight line, while radial gradients spread colors outward from a center point.
Can I use the generated code in any website?+
Yes. Copy the generated background declaration and paste it into a CSS rule, inline style, or supported design system.
Are my colors uploaded or stored?+
No. The gradient is generated entirely in your browser, and your selected colors are not uploaded or stored.