Loading tool…
How to Generate CSS Gradients
The CSS Gradient Generator builds linear and radial gradients visually — with live preview and one-click CSS code copying.
- Choose gradient type (linear or radial) and set the direction or center point.
- Add, remove, and reposition colour stops along the gradient bar.
- Copy the generated CSS code to use in your stylesheet.
Understanding CSS Gradients
CSS gradients create smooth colour transitions without images. Linear gradients transition along a line at a specified angle. Radial gradients transition from a center point outward. Colour stops define where each colour appears in the transition. Modern CSS supports multiple colour stops, hard stops for stripes, and repeating gradients.
Why Use Our Gradient Generator?
- Visual builder — drag colour stops and see the gradient update live.
- Linear and radial — both gradient types with full control.
- CSS output — copy-ready background-image declarations.
- No account needed — build gradients instantly.
Frequently Asked Questions
What is the difference between linear and radial gradients?
Linear gradients transition along a straight line (e.g., top to bottom). Radial gradients transition from a center point outward in a circular or elliptical shape.
Can I create a gradient with more than two colours?
Yes. Add as many colour stops as you like. Each stop defines a colour at a specific position in the gradient.
Does it generate vendor prefixes?
Modern CSS gradients are supported without prefixes in all current browsers. The generated code uses standard syntax.
Is my data stored?
No. Everything runs in your browser.