Gradients

Gradients

A gradient smoothly blends two or more colors. No image needed, it's pure CSS!

Linear gradient

Colors flow in a straight line. You can pick a direction.

div {
  background: linear-gradient(red, yellow);          /* top to bottom */
  background: linear-gradient(to right, red, yellow);
  background: linear-gradient(45deg, red, yellow);   /* diagonal */
}

More stops

Add more colors, stops take up equal share, or set percentages:

div {
  background: linear-gradient(red, yellow, green);
  background: linear-gradient(red 0%, orange 50%, gold 100%);
}

Radial gradient

Colors radiate from a center point outward.

div {
  background: radial-gradient(circle, red, yellow);
  background: radial-gradient(circle at top left, red, yellow);
}

Conic gradient

Colors rotate around a center point, like a pie chart!

div {
  background: conic-gradient(red, yellow, green, blue);
}

Repeating gradients

repeating-linear-gradient(), repeating-radial-gradient():

div {
  background: repeating-linear-gradient(45deg, red, yellow 20px);
}

Creates a striped pattern, handy for chevrons and bargraph fills.

Gradient + transparency

Blend to rgba(0,0,0,0) for a smooth fade-into-background hero image overlay.

TL;DR

• linear-gradient(direction, c1, c2, ...).
• radial-gradient spreads outward.
• conic-gradient spins around a point.
• Repeating versions make stripes.
• Gradients can fade to transparent.