CSS Gradient Builder

Create linear, radial, and conic gradients visually. Add color stops, adjust positions, copy the CSS.

Gradient Type
Angle  135°
Color Stops
CSS Output

About CSS Gradient Builder

CSS gradients let you create smooth color transitions without images. This tool supports all three gradient types: linear (color transitions along a line at any angle), radial (transitions emanating from a center point), and conic (color transitions rotating around a center point).

Add as many color stops as you like, set each stop's position (0%–100%), and adjust the direction angle. The live preview updates in real time. Click Copy to grab the ready-to-paste CSS.