About the CSS Gradient Generator
Build backgrounds and buttons with smooth gradients. Choose the gradient type and angle, add color stops and drag their positions while watching a live preview. Copy the background declaration straight into your stylesheet. The preview updates instantly as you edit.
How to use it
- Choose linear, radial or conic.
- Set the angle and color stops.
- Copy the CSS.
Good to know
- All modern browsers support these gradients without vendor prefixes.
- Conic gradients are ideal for pie-chart effects and color wheels.