CSS Gradient Generator (Linear, Radial, Conic)
Build any CSS gradient visually: pick a type (linear, radial, conic), add color stops, adjust positions and angles, and copy the CSS. Live preview shows exactly what your gradient will look like.
Color stops
Preview
CSS
Presets
How to use the CSS Gradient Generator (Linear, Radial, Conic)
Pick the gradient type. For linear, set the angle (0° = top, 90° = right, 180° = bottom). For radial, pick circle or ellipse. For conic, set the starting angle.
Add color stops with the + Add stop button — each stop has a color and a position (0-100%). The preview updates live.
Building CSS gradients visually
CSS supports three gradient functions and the syntax is fiddly: linear-gradient() takes an angle and stops, radial-gradient() adds a shape and size, and conic-gradient() sweeps around a center. Getting stop positions and angles right by editing text is slow, so a visual builder with a live preview is far quicker.
Pick a type, drag in color stops, set angles and positions, and copy the generated CSS, with a preset library to start from. This builder covers all three gradient types; if you are specifically making a pie chart, donut, or color wheel, the dedicated conic gradient generator centers on that, and for a soft drop shadow to pair with a gradient panel, see the box-shadow generator.
Common use cases
- Hero backgrounds — build a multi-stop linear gradient for a banner.
- Buttons and cards — add a subtle gradient fill to a component.
- Radial highlights — place a soft radial glow behind content.
- Preset starting points — pick a preset and tweak it to taste.
- Design handoff — copy clean CSS straight into a stylesheet.