CSS Gradients: The Complete 2026 Guide

CSS Gradients: The Complete 2026 Guide

CSS gradients have evolved from simple two-color fades to sophisticated visual effects that can replace complex image assets. In 2026, with oklch() color space support landing everywhere and @property enabling animated gradients, there has never been a better time to master this part of CSS. This guide covers every gradient type with practical code examples.

Build and preview every gradient in this guide with our Gradient Generator.

Linear Gradients

The most common gradient type. The full syntax is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Understanding the angle system: This trips up many developers. 0deg means bottom-to-top (gradient flows upward). Angles go clockwise, so 90deg = left-to-right, 180deg = top-to-bottom (the default), 270deg = right-to-left.

/* Default: top to bottom */
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
background: linear-gradient(180deg, #ff6b6b, #4ecdc4);

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

/* Diagonal */
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Multiple color stops with explicit positions */
background: linear-gradient(
  to right,
  #ff0000 0%,
  #ff7f00 16.6%,
  #ffff00 33.3%,
  #00ff00 50%,
  #0000ff 66.6%,
  #8b00ff 100%
);

Hard Color Stops: The Stripe Trick

When two color stops are at the same position, you get a hard edge with no transition. This creates stripes:

/* Two-color stripe */
background: linear-gradient(
  45deg,
  #e74c3c 25%,
  #3498db 25%    /* Same position = hard stop */
);

/* Repeating stripes */
background: repeating-linear-gradient(
  45deg,
  #e74c3c 0px,
  #e74c3c 10px,   /* Red stripe: 0-10px */
  #3498db 10px,   /* Hard stop */
  #3498db 20px    /* Blue stripe: 10-20px, then repeat */
);

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

Radial Gradients

Radial gradients emanate from a center point, either as a circle or an ellipse:

/* Default: ellipse centered */
background: radial-gradient(#ff6b6b, #4ecdc4);

/* Circle with explicit size */
background: radial-gradient(circle at center, #ff6b6b, #4ecdc4);

/* Positioned gradient */
background: radial-gradient(circle at 30% 70%, #ff6b6b 0%, #4ecdc4 60%, transparent 70%);

/* Multiple focal points (layered radials) for spotlight effect */
background:
  radial-gradient(circle at 20% 30%, rgba(255,100,100,0.8) 0%, transparent 50%),
  radial-gradient(circle at 80% 70%, rgba(100,100,255,0.8) 0%, transparent 50%),
  #1a1a2e;

Conic Gradients

Conic gradients rotate around a center point—perfect for pie charts and color wheels:

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

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

/* Pie chart from percentages */
background: conic-gradient(
  #ff6b6b 0% 35%,
  #4ecdc4 35% 70%,
  #ffd93d 70% 85%,
  #6bcb77 85% 100%
);

/* Repeating conic for checkerboard */
background: repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
background-size: 40px 40px;

Mesh Gradients with Multiple Radial Overlays

True mesh gradients are not a CSS primitive, but you can approximate them by layering multiple radial gradients with rgba transparency:

background-color: #0d1117;
background-image:
  radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 0.6) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.5) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.4) 0px, transparent 50%),
  radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 0.5) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 0.6) 0px, transparent 50%),
  radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 0.5) 0px, transparent 50%),
  radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 0.5) 0px, transparent 50%);

Tools like meshgradient.in can generate these multi-layer radial compositions automatically. Use our Gradient Generator as a starting point.

Animated Gradients with CSS @property

The long-standing limitation was that background-position animation was a hack, and direct gradient animation was impossible. @property solves this by registering custom properties with a type, enabling the browser to interpolate them:

@property --gradient-angle {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}

@property --color-1 {
  syntax: '';
  initial-value: #ff6b6b;
  inherits: false;
}

@property --color-2 {
  syntax: '';
  initial-value: #4ecdc4;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), var(--color-1), var(--color-2));
  animation: gradient-rotation 4s linear infinite;
}

@keyframes gradient-rotation {
  0%  { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}

/* Color transition animation */
.color-shift {
  background: linear-gradient(135deg, var(--color-1), var(--color-2));
  animation: color-cycle 3s ease-in-out infinite alternate;
}

@keyframes color-cycle {
  to {
    --color-1: #667eea;
    --color-2: #764ba2;
  }
}

oklch() for Perceptually Uniform Gradients

Traditional RGB or HSL gradients often pass through muddy or unexpected colors in the middle. The oklch() color space is perceptually uniform—equal numeric steps produce equal perceived brightness changes. This creates gradients that look natural:

/* HSL gradient: passes through gray/brown in the middle */
background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(120, 100%, 50%));

/* oklch gradient: vibrant throughout, no mud */
background: linear-gradient(to right, oklch(65% 0.3 0), oklch(65% 0.3 140));

/* Blue to red without the dark purple middle */
background: linear-gradient(
  to right,
  oklch(60% 0.25 250),
  oklch(60% 0.25 0)
);

/* Luminosity stays constant across hue rotation */
background: linear-gradient(
  to right,
  oklch(70% 0.2 0),
  oklch(70% 0.2 360)
);

As of 2026, oklch() has full support in all modern browsers. Use it for any gradient where color vibrancy matters.

Gradient Text Technique

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}

/* Animated gradient text */
@property --text-gradient-angle {
  syntax: '';
  initial-value: 135deg;
  inherits: false;
}

.animated-gradient-text {
  background: linear-gradient(var(--text-gradient-angle), #ff6b6b, #4ecdc4, #667eea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-spin 3s linear infinite;
}

@keyframes text-gradient-spin {
  to { --text-gradient-angle: 495deg; }
}

Gradient Overlay for Readable Text on Images

/* Scrim technique: bottom gradient for legible text overlay */
.card-image {
  position: relative;
}

.card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
  );
}

/* Full-image readability overlay */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

Performance Characteristics

CSS gradients are GPU-composited—they are rasterized once and composited on the GPU. This means they do not trigger repaints when the element is scrolled or transformed. However, changing a gradient's color or position via JavaScript does cause repaint. The exception is properties registered with @property, which can be animated off the main thread.

Gradients with many color stops or complex conic gradients on large elements can impact initial paint time. For background-only gradients spanning the full viewport, keep stop counts under 10 for optimal performance. Check our CSS Glassmorphism Generator for gradient-based glass effects and our Color Picker for selecting gradient colors with oklch output.

Browser Support Summary

• linear-gradient, radial-gradient: Universal (IE 10+)
• conic-gradient: All modern browsers (Chrome 69, Firefox 83, Safari 12.1)
• repeating-conic-gradient: Chrome 69+, Firefox 83+, Safari 12.1+
• @property: Chrome 85+, Firefox 128+, Safari 16.4+
• oklch(): Chrome 111+, Firefox 113+, Safari 15.4+

Also explore our Box Shadow Generator for complementary visual effects that pair well with gradient backgrounds.