Build linear, radial & conic gradients visually with unlimited color stops. Get copy-ready CSS instantly.
A linear gradient transitions colors along a straight line at a defined angle. A radial gradient radiates outward from a central point in an elliptical or circular shape. Conic gradients rotate colors around a center point like a pie chart or color wheel.
Yes. CSS gradients are used as values for the background or background-image property. They are not colors themselves โ they're images. This means you can layer multiple gradients by separating them with commas in background-image.
A color stop defines a color and the position (as a percentage or length) where that color is fully rendered. Between stops, the browser smoothly interpolates. You can stack multiple stops at the same position to create sharp color transitions.
Linear and radial gradients have been supported since IE10 / Chrome 26 / Firefox 16 and have near-universal support today. Conic gradients landed in Chrome 69 and Firefox 83 โ they are not supported in IE. All modern browsers support them.