DEVELOPER
CSS Gradient Generator
Create CSS gradients with live preview and copy-ready CSS code.
0%
100%
Generated CSS
background: linear-gradient(135deg, #FF6B35 0%, #0058BE 100%);
Free CSS Gradient Generator
Build beautiful linear and radial CSS gradients with live preview, adjustable color stops, and copy-ready CSS output.
How to use
- Choose linear or radial gradient type.
- Adjust angle or radial position and color stops.
- Copy the generated CSS into your stylesheet.
Frequently Asked Questions
- How do I add more than 2 colors to a gradient?
- Use Add color stop to insert up to six stops, then adjust each color and position percentage.
- What's the difference between linear and radial gradients?
- Linear gradients transition colors along a straight line at an angle. Radial gradients radiate outward from a center point.