CSS Gradients: A Visual Guide to Beautiful Backgrounds

Understanding CSS Gradients

CSS gradients let you create smooth transitions between colors without using images. They're resolution-independent, load faster than images, and are easy to modify.

Types of Gradients

1. Linear Gradients

Linear gradients transition colors along a straight line.

/* Basic linear gradient */
background: linear-gradient(to right, #667eea, #764ba2);

/* With angle */
background: linear-gradient(45deg, #f093fb, #f5576c);

/* Multiple color stops */
background: linear-gradient(to right, #00c6fb, #005bea, #8f00ff);

2. Radial Gradients

Radial gradients radiate outward from a center point.

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

/* Ellipse shape */
background: radial-gradient(ellipse, #f5af19, #f12711);

3. Conic Gradients

Conic gradients rotate colors around a center point (great for pie charts).

/* Conic gradient */
background: conic-gradient(from 0deg, red, yellow, green, blue, red);

Color Stops

Color stops let you control exactly where colors appear in your gradient:

/* Precise color stops */
background: linear-gradient(
  to right,
  #ff0000 0%,    /* Red at start */
  #ff0000 50%,   /* Red until 50% */
  #0000ff 50%,   /* Blue from 50% */
  #0000ff 100%   /* Blue to end */
);

Popular Gradient Combinations

Best Practices

• Always include a fallback background-color
• Keep gradients subtle for text backgrounds
• Test contrast ratios for accessibility
• Use CSS custom properties for reusable gradients
• Consider reduced-motion preferences