CSS gradient types
- Linear: colors change along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right and 180deg top to bottom.
- Radial: colors spread outward from a center point in a circle or ellipse.
- Conic: colors rotate around a center point, like a color wheel or pie chart.
Syntax
background: linear-gradient(90deg, #1463ff 0%, #7c3aed 100%);
Each color stop has a color and a position. Two stops at the same position create a hard edge instead of a blend, which is useful for stripes.
Tips
- Gradients between neighbouring hues look smooth; gradients between opposite hues can turn grey in the middle. Add a third color stop to keep them vivid.
- Gradients are drawn by the browser, so they stay sharp at any size and add almost nothing to page weight.
- All current browsers support linear, radial and conic gradients without prefixes.