Gradients, dragged into place.
Drag the handles to adjust color stops, tweak the angle, and copy production-ready CSS.
Gradient Type
Color Stops
Presets
CSS Output
About this tool
Gradients are simple in theory but fiddly in practice — getting the angle, color stops, and transition points right usually means a lot of trial and error directly in your CSS file. This tool moves that process onto a visual canvas: drag the stops, watch the gradient update live, and copy the exact CSS once it looks right.
It supports all three gradient types CSS offers — linear, radial, and conic — so whether you're building a hero background, a button, or a loading spinner, the same tool covers it.
How to use it
- Choose a gradient type: Linear, Radial, or Conic.
- Drag the handles along the bar below the preview to reposition color stops, or click a stop to edit its exact hex value and position.
- Add up to eight color stops using "Add color stop" for more complex gradients.
- Copy the generated CSS and paste it directly into your stylesheet's background property.
Why use this one
Visually reposition color stops instead of guessing percentage values.
Linear, radial, and conic gradients in one interface.
Eight ready-made gradient combinations to start from or use as-is.
The exact background value updates live as you edit — no manual syntax writing.
Frequently asked questions
What's the difference between linear, radial, and conic gradients?
Linear gradients transition colors in a straight line at a set angle. Radial gradients spread outward from a center point in a circle. Conic gradients rotate colors around a center point, like a color wheel — useful for pie charts and loading spinners.
Can I use more than two colors in a gradient?
Yes — click "Add color stop" to add up to eight colors, then drag each handle along the bar to control exactly where it sits in the gradient.
Will this CSS work in all browsers?
Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in all current versions of Chrome, Firefox, Safari, and Edge, but may need a fallback background color for very old browsers.
Can I animate a CSS gradient?
Gradients themselves aren't directly animatable with standard CSS transitions, but you can animate a background-position on a larger gradient, or crossfade between two gradient layers with opacity, to create a moving effect.
Why does my conic gradient look different in older browsers?
Conic gradients are a newer CSS feature. All current versions of Chrome, Firefox, Safari, and Edge support them, but very old browser versions may not — consider adding a solid background-color as a fallback for those cases.