CSS Gradients Explained

Deep dive into CSS gradients. Learn linear, radial, and conic gradients with practical examples and use cases.

Linear Gradients

Linear gradients transition colors along a straight line:

background: linear-gradient(direction, color1, color2, ...);

To Right

45deg

To Bottom

135deg

Radial Gradients

Radial gradients spread outward from a center point:

background: radial-gradient(shape size at position, color1, color2, ...);

Circle

Ellipse

Top Left

Closest Side

Multi-color Gradients

/* 三色渐变 */
background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6);

/* 带位置的颜色停止点 */
background: linear-gradient(90deg, 
  #3b82f6 0%, 
  #8b5cf6 50%, 
  #ec4899 100%
);

Practical Tips

Transparent Gradients

Use rgba() for transparency

Repeating Gradients

Use repeating-linear-gradient

Hard Edges

Same position color stops

Text Gradients

Use background-clip: text

Related Tool

Gradient Generator

Visually generate gradient effects