CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the ready-to-use CSS.
Presets
Type
Angle
135ยฐ
Colour Stops
CSS Output
What is a CSS Gradient Generator?
CSS gradients let you display smooth transitions between two or more colours without needing image files. A linear gradient transitions along a straight line at any angle. A radial gradient radiates outward from a central point. Both accept multiple colour stops at precise positions, giving you fine control over how colours blend.
This generator lets you build both types visually โ add and reposition colour stops, adjust angle, and see the result live. The CSS output is ready to paste directly into a stylesheet or Tailwind config. All processing runs locally in your browser.
How to Use
- Choose Linear or Radial gradient type.
- Click a colour swatch to change a stop's colour. Drag the slider to move its position.
- Add more stops with + Add stop, or remove them with โ.
- For linear gradients, drag the Angle slider to rotate.
- Click โฟป Copy CSS to copy the generated CSS to your clipboard.
Frequently Asked Questions
No โ
linear-gradient() and radial-gradient() have had full cross-browser support without vendor prefixes since 2013. All modern browsers (Chrome, Firefox, Safari, Edge) support them natively. You only need -webkit- prefixes if you're supporting very old iOS or Android browsers.Yes โ CSS treats gradient functions as image values, so you apply them with
background or background-image. You can even layer multiple gradients: background: linear-gradient(โฆ), linear-gradient(โฆ); โ the first one listed is on top.No. Everything runs entirely in your browser. Nothing is sent to any server.