CSS Gradients: A Complete Guide with Examples

CSS gradients were one of the most significant additions to CSS3. Before gradients, web designers used image files (often tiny 1-pixel-wide GIFs scaled across a full background) to achieve color transitions. Today, CSS gradients are GPU-rendered, resolution-independent, and support complex multi-color effects that would have required Photoshop a decade ago.

Types of CSS Gradients

CSS supports three gradient types:

• Linear gradients — Colors transition along a straight line at any angle
• Radial gradients — Colors radiate outward from a center point in circles or ellipses
• Conic gradients — Colors sweep around a center point like a color wheel (CSS4)

Each type also has a repeating- variant (repeating-linear-gradient, etc.) that tiles the pattern infinitely.

Linear Gradients

The syntax is: linear-gradient(direction, color-stop-1, color-stop-2, ...)

Direction can be:

• An angle in degrees: 45deg, 135deg, -90deg
• A keyword: to right, to bottom right, to top

0deg is bottom-to-top. 90deg is left-to-right. 180deg (or to bottom) is top-to-bottom.

/* Simple two-color horizontal gradient */
background: linear-gradient(to right, #667eea, #764ba2);

/* Diagonal gradient with three colors */
background: linear-gradient(135deg, #f093fb, #f5576c, #4facfe);

/* Gradient with explicit stop positions */
background: linear-gradient(to right, #000 0%, #000 30%, #fff 70%, #fff 100%);

Color Stops and Positioning

Each color stop can specify a position as a percentage or length value. Without positions, the browser distributes stops evenly:

/* Even distribution: blue at 0%, purple at 50%, red at 100% */
background: linear-gradient(to right, blue, purple, red);

/* Explicit positions */
background: linear-gradient(to right, blue 0%, blue 40%, red 60%, red 100%);
/* Creates a hard line between blue and red at the 40-60% zone */

When two stops share the same position (or are adjacent with no gap), you get a hard edge instead of a smooth transition. This technique creates stripe patterns:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #fff 0px, #fff 10px,
  #000 10px, #000 20px
);

Radial Gradients

Radial gradients radiate from a center point. Syntax: radial-gradient(shape size at position, colors...)

/* Circle from center */
background: radial-gradient(circle, #f6d365, #fda085);

/* Ellipse at top-left corner */
background: radial-gradient(ellipse at top left, #f6d365 0%, transparent 60%);

/* Spotlight effect */
background: radial-gradient(circle 200px at center, rgba(255,255,255,0.3), transparent);

The shape is circle or ellipse. The size can be a length or keyword: closest-side, farthest-side, closest-corner, farthest-corner (default).

Conic Gradients

Conic gradients sweep colors around a center point — like the color wheel. They are newer (Chrome 69+, Firefox 83+) and excellent for pie charts, color wheels, and decorative effects:

/* Color wheel */
background: conic-gradient(
  red, orange, yellow, green, blue, indigo, violet, red
);

/* Pie chart: 60% blue, 30% red, 10% green */
background: conic-gradient(
  blue 0% 60%,
  red 60% 90%,
  green 90% 100%
);

Transparency and RGBA in Gradients

Gradients from a color to transparent are extremely common for overlay effects:

/* Text-readable overlay on images */
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);

/* Fade to white effect */
background: linear-gradient(to right, white, rgba(255,255,255,0));

Beware of the "gray transition problem" — CSS transitions through transparent via rgba(0,0,0,0) by default, which goes through black (or whatever color) at midpoint. Use the transparent version of your actual color: linear-gradient(to right, rgba(255,100,50,1), rgba(255,100,50,0)).

Multiple Gradients

CSS backgrounds accept multiple layers, separated by commas. The first gradient is on top:

/* Gradient over gradient (or over image) */
background:
  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
  linear-gradient(to right, #f093fb, #f5576c);

Text Gradients

You can apply gradients to text using background-clip: text:

h1 {
  background: linear-gradient(to right, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

This technique is widely supported in modern browsers and creates stunning heading effects.

Performance Considerations

CSS gradients are rendered by the GPU and are extremely performant — far more so than background images, which require HTTP requests and decoding. Animating CSS gradients (e.g., changing background-position on a large gradient to simulate movement) can be performant if done correctly, but animating the gradient value itself triggers layout recalculation.

For animated gradients, the common trick is to use an oversized background and animatebackground-position:

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated {
  background: linear-gradient(270deg, #f093fb, #f5576c, #4facfe, #00f2fe);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

Summary

CSS gradients are a powerful, performant way to add visual depth and interest to web designs. Linear gradients work along a line, radial gradients radiate from a point, and conic gradients sweep around a center. Use explicit color stop positions for precise control, RGBA colors for transparency effects, and multiple backgrounds for layering. The text-gradient technique withbackground-clip: text creates striking typographic effects that would previously have required image editing.