CSS Gradient Generator
Create linear and radial CSS gradients visually. Add colour stops, adjust the angle, and copy the CSS code instantly. Free gradient maker for designers and developers.
CSS Gradient Generator — Linear, Radial, and Conic
This CSS gradient generator creates valid CSS gradient syntax for all three gradient types: linear-gradient() for directional gradients with an angle, radial-gradient() for circular or elliptical gradients radiating from a centre point, and conic-gradient() for gradients that rotate around a centre point. Add up to 8 colour stops, adjust positions, and copy the CSS instantly.
How to Use CSS Gradients
Paste the CSS output directly into any CSS property that accepts image values: background, background-image, or even border-image. The generated CSS is production-ready and requires no vendor prefixes in modern browsers. For older browser support, you can prepend -webkit- versions, though this is rarely necessary today (Chrome 26+, Firefox 16+, Safari 6.1+ all support unprefixed gradients).
Gradient Colour Stops
A colour stop defines a colour at a specific position (0-100%) along the gradient. Two stops are the minimum — the start and end colours. Adding more stops creates multi-colour gradients. The position of each stop determines where the colour is fully rendered and how the transition behaves between stops. Equal spacing (0%, 50%, 100%) creates even transitions; uneven spacing creates faster or slower colour changes.