CSS Gradient Generator
Build beautiful CSS gradients with live preview. Supports linear and radial gradients.
Processed locally in your browser
0%
100%
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a specified angle, while a radial gradient radiates colors outward from a center point in a circular or elliptical shape.
Are CSS gradients supported in all browsers?
Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.
How many color stops can I add to a gradient?
There is no practical limit. You can add as many color stops as you need, and each stop can be positioned at a specific percentage along the gradient to create complex color transitions.
Can I use a CSS gradient as a background image?
Yes. CSS gradients are treated as background images, so you can use them with background-size, combine them with other backgrounds, and even layer multiple gradients together.