CSS Gradient Generator
Build linear, radial, or conic gradients. Click the bar to add stops, drag to reposition, copy the CSS.
Angle90°
Presets
Indigo
Sunset
Ocean
Forest
Fire
Midnight
Pastel
Gold
Colour stops — click bar to add
%
Opacity 100%
%
Opacity 100%
Preview
CSS Output
.element {
background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
}How it works
- 1 Choose a gradient type — Linear, Radial, or Conic — using the tabs.
- 2 Adjust the angle, position, or shape controls that appear for that type.
- 3 Click anywhere on the gradient bar to add a colour stop; drag existing handles to reposition them.
- 4 Edit each stop's colour, hex value, position, and opacity using the controls below the bar.
- 5 Click Copy to grab the CSS and paste it directly into your stylesheet.
Why use this tool
- ✓ Visual colour bar — drag stops instead of typing coordinates.
- ✓ Click any point on the bar to insert a new stop with an interpolated colour.
- ✓ Per-stop opacity control for semi-transparent gradients.
- ✓ 8 built-in presets to start from a polished look instantly.
Use cases
- → Hero section backgrounds on landing pages.
- → Button hover effects and card overlays.
- → Progress bars and loading indicators.
- → Diagonal dividers between page sections.
Related tools
✂ 🖼 { } 🔑 📤
CSS Clip Path
Clip gradient elements into custom shapes.
Image Compressor
Optimise background images used alongside gradients.
JSON Formatter
Format design token JSON that includes colour values.
UUID Generator
Generate unique IDs for gradient-styled elements.
File Sender
Share your CSS or design files with teammates.