Build beautiful linear, radial and conic gradients visually — copy CSS in one click.
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-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-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.