🎨 CSS Gradient Generator

Build beautiful linear, radial and conic gradients visually — copy CSS in one click.

Repeat Vendor Prefixes
Gradient Type
Angle
°
Presets
Shape
Size
Center X
%
Center Y
%
Start Angle
°
Center X
%
Center Y
%
Color Stops
#HEX
Position
%
Alpha 100%
Live Preview
Generated CSS
Presets Gallery
Recent Gradients

CSS Gradient Types Explained

Linear Gradients

linear-gradient(angle, stop1, stop2, ...) transitions colors along a straight line defined by the angle. 0deg = bottom to top, 90deg = left to right, 135deg = diagonal. The repeating-linear-gradient() variant tiles the pattern.

Radial Gradients

radial-gradient(shape size at cx cy, stops) radiates outward from a center point. Shape can be circle or ellipse . Size keywords like farthest-corner control how far the gradient extends. Great for spotlight and glow effects.

Conic Gradients

conic-gradient(from angle at cx cy, stops) sweeps colors around a center point like a pie chart. Excellent for pie charts, color wheels, and starburst patterns. Color stop positions are angles (degrees) rather than lengths.