🔧 Utility Tools
CSS Color Gradient Generator
Create beautiful CSS gradients for your website or design. Linear, radial, and conic gradients with unlimited color stops. Copy the CSS with one click.
🔥 Used 7,821 times this month
Presets — click to load
Color stops
Generated CSS
💡 Ctrl+D (Cmd+D on Mac) to bookmark for next time
How it works
01
Pick a Type
Linear (default), radial (from center), or conic (rotational).
02
Add Colors
Click colors to change, drag to reorder, add more stops.
03
Copy CSS
Get ready-to-paste CSS for your website or app.
Frequently asked questions
What are CSS gradients?
CSS gradients let you create smooth color transitions as backgrounds without using images. Faster to load, scale to any size, and easy to change with code.
Linear vs radial vs conic - what's the difference?
Linear goes in a straight line (like a sunset). Radial goes from a center point outward (like a spotlight). Conic rotates around a center (like a pie chart or color wheel).
Are gradients supported in all browsers?
Linear and radial gradients work everywhere. Conic gradients need modern browsers (Chrome 69+, Safari 12.1+, Firefox 83+). We add background-color as a fallback.
Can I use these gradients for text?
Yes. Add these two lines to your text CSS: background: [gradient]; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
All tools are free, browser-based, and process files locally — your data never leaves your device.
Read our Privacy Policy |
Visit our blog for tips and guides.