🔧 Utility Tools
CSS Gradient Generator
Design linear and radial gradients with unlimited color stops. Adjust angle, position, and copy production-ready CSS code.
🌈 Used 17,491 times this month
Color Stops
Presets
CSS output
background: linear-gradient(...);
💡 Ctrl+D to bookmark for next time
How it works
01
Pick Type
Linear (directional) or radial (from center).
02
Add Colors
Two or more color stops with positions.
03
Copy CSS
Ready to paste into your stylesheet.
Frequently asked questions
Linear vs radial?
Linear flows in a straight line at any angle. Radial spreads outward from a center point (ellipse or circle). Linear is more common; radial is great for spotlights and orbs.
What angle should I use?
0° is bottom-to-top, 90° is left-to-right, 180° top-to-bottom, 270° right-to-left. 135° (top-left to bottom-right) is the most popular for modern UI.
Can I use more than 2 colors?
Yes, add as many color stops as you need. Position each between 0% and 100%.
How is this different from Color Palette?
Color Palette shows a preview of hex colors. This tool builds actual CSS gradient code for use in your stylesheet.
All tools are free, browser-based, and process files locally. Read our Privacy Policy | Visit our blog.