Free CSS gradient generator with real-time preview. Create linear and radial gradients for UI design. Copy CSS code instantly.
Preview of your gradient
Create stunning CSS gradients effortlessly with our free online generator. Choose between linear and radial gradients, adjust angles, and customize unlimited color stops with real-time preview. Perfect for UI designers and web developers creating modern interfaces with visual depth. No coding needed - just design, copy the CSS code, and implement in your projects instantly.
A CSS gradient is an image the browser draws from a list of colour stops. Each stop pairs a colour with a position from 0 to 100 percent, and the browser blends smoothly between them, along an angle for linear gradients or outward from the centre for radial ones.
In linear-gradient, 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. The default here is 90deg, so the stop at 0% sits on the left edge.
Yes. Give two neighbouring stops the same position, such as one colour at 50% and the next at 50%, and they meet in a crisp line instead of fading into each other.
Radial gradients are drawn as a circle from the centre of the element. For an ellipse or another starting point, edit the copied code, for example changing circle to ellipse at top left.
No. The generator is free, and the gradient is built in your browser, so the preview and CSS update instantly as you change the stops.
