Free Tool
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually. Drag color stops, adjust angle and position, and copy the ready-to-use CSS.
CSS
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);Type
Angle135°
Color Stops
0%
100%
Presets
Gradient types
Linear gradients transition along a straight line at any angle. Radial gradients radiate from a center point. Conic gradients sweep around a center point — useful for pie charts and color wheels.
How to use
- Choose a gradient type (linear, radial, or conic).
- Add or drag color stops to define the colors.
- Copy the CSS output directly into your stylesheet.
All processing happens in your browser — nothing is sent to any server.
Frequently Asked Questions
- Is the generated CSS cross-browser?
- Yes. The output uses standard CSS gradient syntax supported by all modern browsers.
- Can I share a gradient?
- Yes. Click Share — the gradient state is encoded in the URL, which you can copy and send.