Linear Gradients
Linear gradients transition colors along a straight line defined by an angle. The default direction is top to bottom (180deg). Common angles include 90deg for left-to-right and 45deg for diagonal. Color stops control where transitions occur along the gradient line.
Radial Gradients
Radial gradients emanate from a center point outward in a circular or elliptical shape. The default shape is an ellipse matching the element's proportions. Use the circle keyword for a perfectly round gradient. Position and size control where the gradient originates and how far it extends.
Conic Gradients
Conic gradients rotate colors around a center point like a color wheel. They start from a defined angle and sweep clockwise. Conic gradients are ideal for creating pie charts, circular progress indicators, and decorative angular patterns without needing SVG or canvas elements.
Gradient Best Practices
Use gradients sparingly for maximum visual impact. Limit color stops to two or three for clean designs. Test gradients on different screen sizes to ensure they look good at all dimensions. Consider accessibility by ensuring text overlaid on gradients maintains sufficient contrast ratios.
