CSS Gradient Generator
Build linear, radial, and conic gradients visually — with live preview and copy-ready CSS. Everything runs in your browser. No uploads, no accounts.
Direction
deg
Color Stops
0%
100%
CSS Output
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
Preset Gallery
Frequently Asked Questions
- Is the CSS Gradient Generator free?
- Yes, 100% free. No account, no limits, no sign-up required.
- What types of gradients can I create?
- You can create linear, radial, and conic gradients. Linear gradients go from one direction to another at a chosen angle. Radial gradients radiate outward from a central point. Conic gradients sweep around a point like a color wheel.
- How do I copy the CSS code?
- Click the 'Copy CSS' button in the CSS Output panel. The button shows a checkmark for 1.5 seconds to confirm the copy. You can then paste the code directly into your stylesheet.
- Can I add vendor prefixes for older browsers?
- Yes. Check the 'Include vendor prefixes' checkbox and the output will include -webkit-, -moz-, and -o- prefixed versions alongside the standard declaration.
- How do I add more color stops?
- Click 'Add Stop' in the Color Stops panel to add up to 8 stops. Each stop has a color picker, a hex input, and a position slider from 0% to 100%. You can remove any stop with the trash icon (minimum 2 stops required).
- Does it work on mobile?
- Yes, the tool works on all modern browsers including mobile Safari and Chrome on iOS and Android.