CSS Gradients: A Complete Guide

CSS gradients let you create smooth color transitions entirely in code — no image files needed. They're resolution-independent, infinitely scalable, load instantly, and cost zero HTTP requests. From subtle background washes to complex decorative patterns, gradients are one of the most versatile tools in a web designer's arsenal.

This guide covers all three gradient types in depth: linear, radial, and conic. You'll learn the syntax, master color stops, explore advanced techniques like gradient text and border effects, and understand the performance implications.

Linear Gradients

Linear gradients transition colors along a straight line. They're the most commonly used gradient type and the foundation of most gradient-based designs.

Basic Syntax

The linear-gradient() function takes a direction (or angle) followed by two or more color stops:

/* Top to bottom (default) */
background: linear-gradient(#667eea, #764ba2);

/* Left to right */
background: linear-gradient(to right, #f093fb, #f5576c);

/* Diagonal */
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

/* Using angles */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Direction and Angles

You can specify the gradient direction using keywords or degree values:

• to bottom (default, same as 180deg) — top to bottom
• to right (same as 90deg) — left to right
• to top (same as 0deg) — bottom to top
• to left (same as 270deg) — right to left
• to bottom right — diagonal, top-left to bottom-right
• Any degree value: 45deg, 135deg, 220deg, etc.

Degree values start from the top (0deg = to top) and rotate clockwise. So 90deg points right, 180deg points down, and 270deg points left.

Color Stops

Color stops define where each color appears along the gradient line. You can use percentages, pixels, or other length units:

/* Even distribution (automatic) */
background: linear-gradient(to right, red, yellow, green);

/* Custom stop positions */
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);

/* Hard color stops (no transition) */
background: linear-gradient(to right, red 50%, blue 50%);

/* Multiple stops at same position = sharp line */
background: linear-gradient(to right,
  #ff6b6b 0%, #ff6b6b 33%,
  #4ecdc4 33%, #4ecdc4 66%,
  #45b7d1 66%, #45b7d1 100%
);

Hard color stops — where one color ends and another begins at the exact same position — create stripes rather than smooth transitions. This technique is the foundation of CSS-only stripe patterns.

Color Hints (Midpoints)

A color hint is a bare length value placed between two color stops. It shifts the midpoint of the transition:

/* Midpoint at 25% — transition happens mostly in the first quarter */
background: linear-gradient(to right, #667eea, 25%, #764ba2);

Without a hint, the midpoint (50/50 blend) sits exactly halfway between stops. Color hints let you weight the transition toward one color or the other.

Radial Gradients

Radial gradients transition colors outward from a center point in a circular or elliptical shape. They're perfect for spotlight effects, glowing highlights, and circular UI elements.

Basic Syntax

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

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

/* Positioned center */
background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c);

/* Sized gradient */
background: radial-gradient(circle 200px at center, #4facfe, transparent);

Shape and Size Keywords

The shape can be circle or ellipse (default). Size keywords control how far the gradient extends:

• closest-side — extends to the nearest edge
• closest-corner — extends to the nearest corner
• farthest-side — extends to the farthest edge
• farthest-corner (default) — extends to the farthest corner

You can also use explicit sizes: circle 100px for a fixed-radius circle, or ellipse 200px 100px for explicit horizontal and vertical radii.

Positioning

The at keyword positions the gradient center. You can use keywords (center, top left), percentages, or length values:

/* Spotlight in top-left corner */
background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.3), transparent 50%);

/* Glow effect behind a card */
background: radial-gradient(ellipse at 50% 0%, #667eea33, transparent 70%);

Conic Gradients

Conic gradients transition colors around a center point, like the sweep of a clock hand. They're ideal for pie charts, color wheels, progress indicators, and decorative patterns.

Basic Syntax

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Starting angle */
background: conic-gradient(from 90deg, #667eea, #764ba2);

/* Pie chart */
background: conic-gradient(
  #ff6b6b 0deg 120deg,
  #4ecdc4 120deg 240deg,
  #45b7d1 240deg 360deg
);

/* Positioned center */
background: conic-gradient(from 0deg at 50% 50%, #667eea, #764ba2, #667eea);

Conic gradients use degree values for color stops (0–360deg). Setting hard stops at specific angles creates clean pie-chart segments. Browser support is excellent at over 95% globally.

Repeating Gradients

The repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions tile the gradient pattern across the entire element:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #667eea 0px, #667eea 10px,
  #764ba2 10px, #764ba2 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #667eea 0px, #667eea 10px,
  transparent 10px, transparent 20px
);

/* Checkerboard pattern (using two layers) */
background:
  repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 40px 40px;

Repeating gradients are incredibly powerful for creating pure-CSS patterns — stripes, dots, grids, and complex geometric designs — without any image files.

Gradient Text Effect

One of the most popular gradient techniques is applying a gradient to text. The trick uses the gradient as a clipped background:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

The gradient is rendered as the background, then background-clip: text masks it to only show through the text shapes. Setting the text color to transparent reveals the gradient underneath. Include -webkit- prefixes for Safari compatibility.

Accessibility note: Gradient text can have poor contrast against certain backgrounds. Always verify that the lightest color in your gradient meets WCAG contrast ratios against the page background.

Gradient Borders

CSS doesn't support gradients directly in the border property, but you can achieve the effect using border-image or a background-based technique:

/* Method 1: border-image (no border-radius support) */
.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

/* Method 2: background + padding (supports border-radius) */
.gradient-border-rounded {
  background: linear-gradient(135deg, #667eea, #764ba2) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
}

/* Method 3: Pseudo-element (most flexible) */
.gradient-border-pseudo {
  position: relative;
  background: var(--bg);
  border-radius: 12px;
}
.gradient-border-pseudo::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: inherit;
  z-index: -1;
}

Performance Considerations

CSS gradients are GPU-accelerated and rendered directly by the browser's compositor — they don't generate network requests or occupy image decode threads. For most use cases, gradients are significantly more performant than equivalent image files.

• Simple gradients (2–3 colors): Negligible performance impact. Use freely.
• Complex patterns (many stops, repeating): May cause minor rendering overhead on very large elements or low-powered devices. Test on mobile.
• Animated gradients: Animating background triggers a repaint on every frame. For smooth animations, use CSS custom properties or animate a pseudo-element's transform or opacity instead.
• Gradients vs. images: A gradient is always faster than an image for the same visual effect — zero HTTP requests, zero decode time, infinite resolution.

Browser Support

All three gradient types enjoy excellent modern browser support:

• linear-gradient: 99%+ global support. No prefixes needed.
• radial-gradient: 99%+ global support. No prefixes needed.
• conic-gradient: 95%+ global support (all modern browsers since 2020).
• background-clip: text: 97%+ with -webkit- prefix. The unprefixed version is supported in Firefox and Chrome.

For the rare legacy browser that doesn't support gradients, always provide a solid-color fallback as the first background declaration:

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