About the Gradient Generator
CSS gradients add depth and motion to an otherwise flat design, but writing gradient syntax by hand — especially for multi-stop or conic gradients — is fiddly and easy to get subtly wrong. This gradient generator lets you build linear, radial, and conic gradients visually, using real color pickers and an angle dial, and gives you back copy-ready CSS the moment you're happy with the preview.
How it works
Pick a gradient type first — linear, radial, or conic — since each one is built differently under the hood. For linear gradients you control the angle in degrees; for radial gradients you control the shape and center point; for conic gradients you control the starting angle around a circle. Add as many color stops as you need and drag their position sliders to control exactly where each color starts and ends. The live preview box updates instantly, and the CSS panel below regenerates in sync, so what you copy is always exactly what you're looking at.
Common use cases
- Designing hero section backgrounds that feel less flat than a solid color
- Building button or badge backgrounds with subtle depth
- Creating radial spotlight or glow effects behind text or icons
- Generating conic gradients for pie-chart-like indicators or loading spinners
- Prototyping brand gradients before locking them into a design system
Tips for best results
Two or three color stops usually look more intentional than five or six — busy gradients tend to read as noisy rather than premium. If you want a gradient to feel subtle instead of loud, keep the two colors close in hue and vary mainly the lightness, rather than combining hues from opposite sides of the color wheel.
Frequently asked questions
A linear gradient moves color in a straight line across a chosen angle. A radial gradient spreads color outward from a center point in a circle or ellipse. A conic gradient sweeps color around a center point like the hands of a clock, which is useful for pie charts and dial-style UI.
Yes, you can add as many color stops as you like using the add-stop control, and each stop has its own position slider so you can control precisely where the color transition happens.
The CSS uses the standard linear-gradient(), radial-gradient(), and conic-gradient() functions, which are supported in all current versions of Chrome, Firefox, Safari, and Edge without vendor prefixes.
A background gradient applied to a box works everywhere. For a gradient applied specifically to text, use the dedicated Gradient Text CSS Generator tool, which handles the extra background-clip styling that text gradients require.
That happens when the element isn't square — a radial gradient with an unspecified shape defaults to matching the box's aspect ratio. Set the shape control to 'circle' if you want a perfectly round gradient regardless of the box's dimensions.