๐ CSS Gradient Generator
Color stops
%
%
CSS
background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%);
Adjust multiple color stops and an angle to generate CSS code for linear-gradient or radial-gradient, with a live preview. Handy for designing buttons or backgrounds.
How to use
- Choose the gradient type (linear or radial).
- For linear gradients, adjust the angle with the slider.
- Adjust each color stop's color and position, then use "Copy" to copy the generated CSS code.
FAQ
How many color stops can I add?
Up to 6 color stops.
Can I set an angle for a radial gradient?
No, radial gradients spread outward in a circle from the center, so there's no angle to set. Angle only applies to linear gradients.
Can I use the generated CSS as-is?
Yes, it's output in the form "background: linear-gradient(...);", ready to paste directly into your CSS file.