CSS Gradient Generator
Create beautiful CSS gradients visually. Linear, radial, and conic gradients with live preview and one-click copy.
Preview
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
Gradient Type
Direction
Colors
Preset Gradients
CSS Gradients Guide
Linear Gradient
Creates a gradient along a straight line. Perfect for backgrounds, buttons, and headers.
linear-gradient(90deg, #color1, #color2)Radial Gradient
Radiates from a central point outward. Great for spotlight effects and circular elements.
radial-gradient(circle, #color1, #color2)Conic Gradient
Color transitions rotate around a center point. Ideal for pie charts and color wheels.
conic-gradient(from 0deg, #color1, #color2)Frequently Asked Questions
Do CSS gradients work in all browsers?
Yes! CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider adding a solid color fallback.
Can I use gradients on text?
Yes! Use background-clip: text and -webkit-background-clip: text with color: transparent to create gradient text effects.
How many colors can I use in a gradient?
There's no technical limit to the number of color stops. However, 2-5 colors typically produce the best visual results. Too many colors can look muddy.
Can I animate CSS gradients?
Gradients themselves can't be directly animated, but you can animate the background-position or background-size properties to create animated gradient effects.
More developer tools