Free CSS Gradient Generator
Build a linear or radial gradient, adjust colors and stops, and copy the ready-to-use CSS.
Color stops
CSS
Frequently Asked Questions
Linear vs. radial gradient — what's the difference?
A linear gradient transitions colors along a straight line at whatever angle you set. A radial gradient transitions colors outward from a center point in a circle. Linear suits backgrounds and buttons; radial suits spotlight or glow effects.
What do the color stop percentages mean?
Each stop's percentage is where that color reaches full strength along the gradient. Two stops at 0% and 100% blend smoothly across the whole element; bunching stops closer together makes the transition between them sharper.
Do I need vendor prefixes for gradients?
No. linear-gradient() and radial-gradient() have been supported unprefixed in every modern browser for years, so the CSS this tool generates works as-is.
Can I use more than two colors?
Yes — add as many color stops as you like with the "Add color" button, each with its own position, and remove any stop with its × button (a gradient needs at least two).