🌈 CSS Gradient Generator
Build linear and radial gradients visually. Add stops, set the angle, and copy production-ready CSS.
About this tool
Design beautiful CSS gradients without memorising syntax. Choose linear or radial, drag the angle, add as many color stops as you like, and watch the live preview update. When you're happy, copy the background CSS straight into your stylesheet.
Everything renders with native CSS in your browser — no images, no server. Use it for hero sections, buttons, cards, and backgrounds.
Type
Angle: 90°
CSS