CSS Gradient Generator
Create beautiful CSS gradients. Choose colors and direction. Copy CSS code instantly.
CSS Gradients
CSS gradients create smooth color transitions. Linear gradients go in one direction. Radial gradients emanate from center. Use in backgrounds, borders, and text.
FAQ
How do I use CSS gradients? ▼
Use background property: background: linear-gradient(...). Copy code from this tool.
What's the difference between linear and radial? ▼
Linear: colors flow in a line. Radial: colors emanate from center point.
Can I add more colors? ▼
Yes. Edit CSS code: add color stops like "color1 0%, color2 50%, color3 100%"
Browser support? ▼
Excellent. All modern browsers support CSS gradients. Works on mobile too.
Can I animate gradients? ▼
Yes, with CSS animations. Gradient animation requires background-size adjustment.