About this tool
The CSS Gradient Generator lets you design smooth linear gradients by picking two colors and an angle, with a live preview and ready-to-copy CSS. Gradients add depth and personality to buttons, hero sections and backgrounds. Copy the generated background property straight into your stylesheet.
How to use
- 1Pick a start and end color.
- 2Adjust the angle.
- 3Copy the CSS background code.
Benefits
- Live gradient preview.
- Adjustable angle and colors.
- Copy-ready CSS output.
Frequently asked questions
Can I use this on any website?+
Yes. The output is standard CSS that works in every modern browser.
How do I change direction?+
Adjust the angle slider — 90deg goes left to right, 180deg goes top to bottom.