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.

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.