CSS Gradient Generator
Build beautiful CSS gradients — linear, radial and conic — with unlimited color stops. Preview live, copy valid CSS, download as a .css file.
Color Stops
CSS Code
background: linear-gradient(135deg, #155EEF 0%, #7C3AED 100%);
What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, created purely with CSS — no image file needed. Gradients are commonly used for hero sections, buttons, background accents, cards and overlays. There are three main types: linear (straight line), radial (circle from a center point) and conic (sweep around a center point).
How to Use the CSS Gradient Generator
- Choose the gradient type (linear, radial or conic).
- Adjust the angle slider to rotate the gradient direction.
- Click any color swatch to change its color.
- Drag the position field to move a stop between 0% and 100%.
- Add unlimited color stops for complex gradients.
- Copy the CSS code with one click, or download it as a .css file.
Example CSS Output
Here is the exact CSS the generator produces for a two-stop linear gradient:
background: linear-gradient(135deg, #155EEF 0%, #7C3AED 100%);