How to Create CSS Gradients

CSS gradients let you display smooth transitions between two or more colors without any image files. They are defined entirely in CSS and render at any resolution — perfectly sharp on any screen. This guide covers everything you need to know: syntax, gradient types, color stops, angles, and modern color space interpolation.

For a faster workflow, use the CSS Gradient Generator to build gradients visually and copy the ready-to-use code.

The three CSS gradient types

CSS provides three gradient functions, each producing a different geometric pattern:

• —linear-gradient() — blends colors along a straight line at any angle
• —radial-gradient() — blends colors outward from a center point in a circle or ellipse
• —conic-gradient() — blends colors in a rotation around a center point

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

Linear gradients

The most common gradient type. Define a direction and two or more color stops:

/* Top to bottom (default) */
background: linear-gradient(#3b82f6, #8b5cf6);

/* Left to right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #3b82f6, #8b5cf6);

/* Three color stops */
background: linear-gradient(to right, #3b82f6, #ec4899, #8b5cf6);

The first argument is the direction. Use keyword directions (to right, to bottom left) or an angle in degrees (45deg, 180deg). If omitted, the default is to bottom.

Color stops

Color stops define where each color begins, ends, or transitions. By default, stops are distributed evenly. You can specify explicit positions as percentages or lengths:

/* Explicit stop positions */
background: linear-gradient(
  to right,
  #3b82f6 0%,
  #3b82f6 30%,   /* blue holds until 30% */
  #8b5cf6 70%,   /* purple starts at 70% */
  #8b5cf6 100%
);

/* Hard stop (no transition) */
background: linear-gradient(
  to right,
  #3b82f6 50%,
  #8b5cf6 50%    /* immediate color change at midpoint */
);

Radial gradients

Radial gradients radiate outward from a center point. The default shape is an ellipse that touches the farthest corner.

/* Default ellipse */
background: radial-gradient(#3b82f6, #8b5cf6);

/* Circle */
background: radial-gradient(circle, #3b82f6, #8b5cf6);

/* Custom center position */
background: radial-gradient(circle at 30% 70%, #3b82f6, #8b5cf6);

/* Custom size */
background: radial-gradient(circle 200px at center, #3b82f6, #8b5cf6);

Conic gradients

Conic gradients sweep colors around a center point — like a color wheel. They're ideal for pie charts, clock faces, and spinner effects.

/* Basic conic gradient */
background: conic-gradient(#3b82f6, #ec4899, #8b5cf6, #3b82f6);

/* Starting angle */
background: conic-gradient(from 45deg, #3b82f6, #8b5cf6);

/* Pie chart (hard stops) */
background: conic-gradient(
  #3b82f6 0% 25%,
  #ec4899 25% 60%,
  #8b5cf6 60% 100%
);

Modern color spaces

By default, CSS gradients interpolate in sRGB — which can produce dull, muddy colors at the midpoint of saturated transitions. Modern CSS supports perceptually uniform color spaces:

/* Default sRGB (can look gray in the middle) */
background: linear-gradient(to right, oklch(60% 0.3 240), oklch(60% 0.3 0));

/* OKLCH — vivid colors throughout */
background: linear-gradient(
  in oklch to right,
  oklch(60% 0.3 240),
  oklch(60% 0.3 0)
);

Supported color spaces include oklch, oklab, lch, and lab. OKLCH is recommended for the most perceptually uniform results. Requires Chrome 111+, Firefox 113+, Safari 16.2+.

Multiple gradient layers

Stack multiple gradients as comma-separated values in background-image. Earlier values render on top:

background-image:
  radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.6), transparent 50%),
  radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.6), transparent 50%),
  linear-gradient(135deg, #0a0a0a, #1a1a2e);

Applying gradients to text and borders

/* Text gradient */
.title {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Border gradient */
.card {
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1;
}

Browser compatibility

Linear, radial, and conic gradients work in all modern browsers. Conic gradient has full support since Chrome 69, Firefox 83, and Safari 12.1. OKLCH/OKLAB interpolation requires Chrome 111+, Firefox 113+, Safari 16.2+.