CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
background: linear-gradient(135deg, #2563eb, #9333ea);
Pick a start and end color, choose linear or radial, set the angle, and preview the gradient live. Copy the ready-to-paste CSS `background` rule for your website, button or hero section — all generated in your browser.
How to use the CSS Gradient Generator
- Choose the from and to colors.
- Pick linear or radial, and set the angle for linear gradients.
- Preview the result and copy the CSS background rule.
Frequently asked questions
What CSS does it output?
A single `background:` declaration using linear-gradient() or radial-gradient(), ready to paste into any stylesheet or inline style.
Can I use more than two colors?
This generator focuses on clean two-color gradients. You can extend the copied CSS by adding more color stops inside the gradient function.