CSS Gradient Builder

Build linear, radial and conic CSS gradients visually. Drag color stops, copy CSS output instantly.

Type

Angle

90deg

Color Stops

CSS Output

🎨

Linear gradient

Transitions along a straight line. Control the angle: 0deg = bottom to top, 90deg = left to right.

⭕

Radial gradient

Radiates from a center point outward. Great for spotlight and glow effects.

🔄

Conic gradient

Transitions rotate around a center point. Perfect for pie charts and color wheels.

✋

Color stops

Each stop has a color and a position (0%–100%). Add as many as you need.

Related Tools