CSS Gradient Generator
Design gradients visually and copy the CSS.
Create linear or radial gradients with two colors, an angle and a stop position. Watch the live preview as you adjust, then copy the finished CSS declaration.
135°
100%
Start color
End color
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);How to build a gradient
- Choose linear or radial as the gradient type.
- Pick your two colors with the color pickers.
- Adjust the angle and the stop position with the sliders.
- Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
What is the difference between linear and radial?
A linear gradient flows in one direction along a straight line, while a radial gradient spreads outward from a central point.
Can I use the output in inline styles?
Yes. Copy the background declaration into any CSS rule or inline style attribute.
Do the colors leave my browser?
No. The generator works entirely on your device with no uploads.