CSS Gradient Generator
Create linear and radial CSS gradients with a live preview.
background: linear-gradient(90deg, #1a5fff 0%, #00b4ff 100%);Related Guide
CSS Gradient Generator: How to Build Linear and Radial Gradients
About This Tool
Free CSS gradient generator — visually build linear or radial gradients with multiple color stops, adjustable angle, and a live preview, then copy the exact CSS `background` code ready to paste into your stylesheet. No sign-up, no upload, entirely browser-based. Web designers and front-end developers use gradients constantly for hero sections, buttons, cards, and backgrounds, but hand-writing gradient syntax with the right angle and color-stop percentages is tedious and error-prone. This tool lets you add and remove color stops, drag to reposition them, switch between linear and radial modes, and rotate the angle with a slider — the CSS updates live so what you see is exactly what you get.
How to Use
- 1
Choose a gradient type
Select linear or radial.
- 2
Add and adjust color stops
Add multiple colors, drag their position, and set the angle (for linear gradients).
- 3
Copy the CSS
Copy the generated `background: linear-gradient(...)` or `radial-gradient(...)` code directly into your CSS.