CSS Gradients: Complete Guide with Examples

What Are CSS Gradients?

CSS gradients are smooth transitions between two or more colors, generated entirely by the browser without images. They are defined as background-image values, which means they can be layered, sized, positioned, and repeated just like any other background.

CSS supports three gradient types: linear (along a straight line), radial (outward from a center point), and conic (swept around a center point). Each has a repeating variant. Combined, they cover virtually any color transition effect you can imagine.

You can generate any of these visually with the QTool Gradient Generator -- adjust colors, angles, and stops, then copy the CSS.

Linear Gradients

A linear gradient transitions colors along a straight line. The direction can be specified as a keyword (to right, to bottom left) or an angle in degrees.

Basic syntax

/* Direction keyword */
background: linear-gradient(to right, #00d4ff, #ec4899);

/* Angle (90deg = to right, 180deg = to bottom) */
background: linear-gradient(135deg, #00d4ff, #a855f7, #ec4899);

/* With explicit color stop positions */
background: linear-gradient(90deg, #00d4ff 0%, #a855f7 40%, #ec4899 100%);

Direction reference

Hard color stops (no transition)

Place two color stops at the same position to create a sharp line with no blending. This technique is useful for striped patterns and flags.

/* Sharp two-tone split */
background: linear-gradient(90deg, #00d4ff 50%, #ec4899 50%);

/* Three equal stripes */
background: linear-gradient(
  to bottom,
  #00d4ff 0%, #00d4ff 33.3%,
  #a855f7 33.3%, #a855f7 66.6%,
  #ec4899 66.6%, #ec4899 100%
);

Transparent gradients (fading)

/* Fade to transparent */
background: linear-gradient(to bottom, #00d4ff, transparent);

/* Transparent in the middle (for overlay effects) */
background: linear-gradient(
  to right,
  rgba(0, 0, 0, 0.8),
  transparent 40%,
  transparent 60%,
  rgba(0, 0, 0, 0.8)
);

Experiment with any of these interactively using the Color Gradient Generator.

Radial Gradients

Radial gradients radiate outward from a center point. By default, the shape is an ellipse that fills the element. You can change it to a circle and control the size and position.

/* Basic radial gradient (ellipse, centered) */
background: radial-gradient(#00d4ff, #050508);

/* Circle shape */
background: radial-gradient(circle, #00d4ff, #050508);

/* Position: top left */
background: radial-gradient(circle at top left, #00d4ff, #050508);

/* Size keyword: closest-side, farthest-corner, etc. */
background: radial-gradient(circle closest-side at 30% 50%, #a855f7, #050508);

Size keywords

Spotlight and glow effects

/* Soft spotlight */
.spotlight {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 212, 255, 0.3) 0%,
    transparent 70%
  );
}

/* Glowing orb */
.orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #818cf8,
    #00d4ff 40%,
    #4338ca 70%,
    #312e81
  );
}

For mesh-style gradients with multiple radial layers, try the Mesh Gradient Generator.

Conic Gradients

A conic gradient sweeps color transitions around a center point, like a color wheel. Colors are distributed along the circumference rather than radiating outward.

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

/* Starting angle */
background: conic-gradient(from 45deg, #00d4ff, #ec4899, #00d4ff);

/* Positioned center */
background: conic-gradient(from 0deg at 25% 50%, #00d4ff, #ec4899, #00d4ff);

Pie chart with CSS only

/* 3-segment pie chart: 40% blue, 35% purple, 25% pink */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #00d4ff 0% 40%,
    #a855f7 40% 75%,
    #ec4899 75% 100%
  );
}

Conic gradients are ideal for progress indicators, pie charts, and decorative backgrounds. Use the QTool Gradient Generator to experiment with angles and color stops visually.

Repeating Gradients

The repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient functions tile the gradient pattern infinitely.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #00d4ff,
  #00d4ff 10px,
  #4338ca 10px,
  #4338ca 20px
);

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

/* Starburst */
background: repeating-conic-gradient(
  #00d4ff 0deg 10deg,
  transparent 10deg 20deg
);

Text Gradients

Gradient text is one of the most popular CSS effects. The technique applies a gradient as the background and then clips it to the text shape.

.gradient-text {
  background: linear-gradient(135deg, #00d4ff, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* With fallback for very old browsers */
.gradient-text {
  color: #00d4ff; /* fallback */
  background: linear-gradient(135deg, #00d4ff, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Generate gradient text visually with the Gradient Text Generator -- pick your colors, see the preview, and copy the CSS.

Gradient Borders

CSS does not have a border-gradient property, but you can achieve the effect using border-image or a background trick with a pseudo-element.

Using border-image

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(135deg, #00d4ff, #ec4899) 1;
}

/* Note: border-image does NOT work with border-radius.
   Use the padding-box technique below for rounded corners. */

Using background + padding (supports border-radius)

.gradient-border-rounded {
  position: relative;
  background: #050508;           /* inner background */
  padding: 2px;                  /* acts as border width */
  border-radius: 12px;
}

.gradient-border-rounded::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #00d4ff, #ec4899);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

The Border Radius Generator helps you fine-tune the corner values for gradient-bordered elements.

Animating Gradients

CSS cannot natively transition between gradient values. But there are three reliable techniques to create the illusion of animated gradients.

Technique 1: Animate background-position

Create an oversized gradient and animate its position. This is the most performant and widely supported approach.

.animated-gradient {
  background: linear-gradient(270deg, #00d4ff, #a855f7, #ec4899, #00d4ff);
  background-size: 300% 100%;
  animation: gradient-shift 4s ease infinite;
}

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

Technique 2: @property for animating color stops

The @property rule (Houdini) lets you register CSS custom properties with types, which makes them animatable.

@property --gradient-start {
  syntax: '<color>';
  initial-value: #00d4ff;
  inherits: false;
}

@property --gradient-end {
  syntax: '<color>';
  initial-value: #ec4899;
  inherits: false;
}

.houdini-gradient {
  --gradient-start: #00d4ff;
  --gradient-end: #ec4899;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  transition: --gradient-start 0.5s, --gradient-end 0.5s;
}

.houdini-gradient:hover {
  --gradient-start: #22c55e;
  --gradient-end: #3b82f6;
}

Technique 3: Pseudo-element crossfade

.crossfade-gradient {
  position: relative;
  background: linear-gradient(135deg, #00d4ff, #ec4899);
}

.crossfade-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #22c55e, #3b82f6);
  opacity: 0;
  transition: opacity 0.6s;
}

.crossfade-gradient:hover::after {
  opacity: 1;
}

Layering Multiple Gradients

Since gradients are background-image values, you can stack multiple gradients on a single element using comma-separated values. This is how you create complex patterns, mesh effects, and aurora-style backgrounds.

/* Aurora-style layered background */
.aurora {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.25), transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(236, 72, 153, 0.2), transparent 50%),
    linear-gradient(180deg, #050508, #0a0a15);
}

/* Grid pattern from layered gradients */
.grid-pattern {
  background:
    linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

The first gradient in the list renders on top. Use transparent or semi-transparent colors in upper layers so lower layers show through.

Performance Tips

1. Gradients are GPU-accelerated. In most browsers, CSS gradients render on the GPU. They are faster than loading equivalent image files because there is no network request and no image decoding.
2. Avoid very large gradient elements. A gradient on a 10,000px-tall page section is fine, but animating a gradient on such an element can cause jank. Keep animated gradients to reasonably sized containers.
3. Prefer background-position animation over re-rendering. Changing background-position is a compositor-level operation (no repaint). Changing gradient colors causes a repaint. For smooth 60fps animations, always use the position technique.
4. Use will-change: background-position sparingly. Only add will-change to elements that will actually animate, and remove it after the animation completes. Overusing will-change wastes GPU memory.
5. Test on mobile devices. Complex layered gradients with many color stops can cause slight stutter on low-end Android devices. Use the Responsive Tester to preview your designs across screen sizes.

Frequently Asked Questions

How do I create a CSS gradient from left to right?

Use the linear-gradient function with the to right direction: background: linear-gradient(to right, #00d4ff, #ec4899). You can also use degree notation: background: linear-gradient(90deg, #00d4ff, #ec4899). Both produce an identical horizontal gradient flowing from the first color on the left to the second color on the right.

What is the difference between linear-gradient and radial-gradient in CSS?

linear-gradient creates a color transition along a straight line (horizontal, vertical, or any angle). radial-gradient creates a color transition radiating outward from a center point in an elliptical or circular shape. Use linear gradients for backgrounds, banners, and buttons. Use radial gradients for spotlight effects, glowing orbs, and vignettes.

How do I add a gradient to text in CSS?

Apply a background gradient and then clip it to the text shape: background: linear-gradient(135deg, #00d4ff, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. This is supported in all modern browsers. Always set a solid color fallback for older browsers. Generate this visually with the QTool Gradient Text Generator.

Can I animate a CSS gradient?

CSS cannot natively transition between gradient values. However, you can animate gradients using three techniques: (1) Animate the background-position of an oversized gradient -- the most performant approach. (2) Use @property to register custom properties and animate individual color stops. (3) Use a pseudo-element with a different gradient and animate its opacity. See the Animating Gradients section above for code examples of all three.

What is a conic gradient and when should I use it?

A conic-gradient creates color transitions that rotate around a center point, like the sweep of a clock hand. The colors transition along the circumference rather than radiating outward. Conic gradients are ideal for pie charts, color wheels, progress indicators, and decorative patterns. Syntax: background: conic-gradient(from 0deg, red, yellow, green, blue, red). Supported in all modern browsers since 2020.