CSS Gradients: A Complete Guide with Examples

CSS gradients let you create smooth transitions between colors without using images. They're lightweight, scalable, and supported by all modern browsers.

Linear Gradients

Linear gradients transition colors along a straight line:

/* Left to right */
background: linear-gradient(90deg, #2563eb, #7c3aed);

/* Top to bottom (default) */
background: linear-gradient(#ff6b6b, #ffd93d);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multiple colors */
background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);

Radial Gradients

Radial gradients radiate from a center point:

/* Simple radial */
background: radial-gradient(circle, #667eea, #764ba2);

/* Positioned */
background: radial-gradient(circle at top left, #f093fb, transparent);

Popular Gradient Combinations

• Sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
• Ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• Forest: linear-gradient(135deg, #11998e 0%, #38ef7d 100%)
• Fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%)

Tips for Using Gradients

1. Use subtle gradients for backgrounds — dramatic gradients can be distracting
2. Ensure text contrast — test readability against all parts of the gradient
3. Combine with transparency for overlay effects
4. Use our CSS Gradient Generator to design gradients visually and copy the code