CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview. Add up to 5 color stops and copy the ready-to-use CSS instantly.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a type of image that transitions smoothly between two or more colors. Gradients are created using the CSS linear-gradient() or radial-gradient() functions and can be used anywhere an image is accepted, such as backgrounds.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient radiates outward from a central point in a circular or elliptical pattern. Both types support multiple color stops for complex multi-color effects.
How do I add more colors to a gradient?
Click "Add Color Stop" to add up to 5 color stops. Each stop has a color picker and a position (0–100%) that controls where the color appears in the gradient. You can reorder the visual effect by adjusting the positions.