CSS Gradients: A Complete Tutorial with Examples

What Are CSS Gradients?

CSS gradients are smooth transitions between two or more colors, rendered directly by the browser without any image files. They are defined using CSS functions like linear-gradient(), radial-gradient(), and conic-gradient(), and can be used anywhere a CSS image is accepted — most commonly as background-image values.

Gradients are resolution-independent (they look sharp on any screen), require zero HTTP requests, and are infinitely customizable. They're one of the most versatile tools in modern CSS, powering everything from subtle background textures to eye-catching hero sections and creative text effects.

Linear Gradients

The linear-gradient() function creates a gradient that transitions along a straight line. It's the most commonly used gradient type.

Basic Syntax

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

/* Equivalent explicit syntax */
background: linear-gradient(to bottom, #667eea, #764ba2);

By default, a linear gradient flows from top to bottom. The first color starts at the top edge and smoothly transitions to the second color at the bottom edge.

Direction Keywords

You can control the gradient direction using keywords:

/* Cardinal directions */
background: linear-gradient(to right, #f093fb, #f5576c);
background: linear-gradient(to left, #f093fb, #f5576c);
background: linear-gradient(to top, #f093fb, #f5576c);
background: linear-gradient(to bottom, #f093fb, #f5576c);

/* Diagonal directions */
background: linear-gradient(to bottom right, #667eea, #764ba2);
background: linear-gradient(to top left, #f093fb, #f5576c);

Using Angles

For precise control, specify the direction as an angle in degrees. The angle defines the direction of the gradient line: 0deg points up, 90deg points right, 180deg points down, and 270deg points left.

background: linear-gradient(45deg, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(90deg, #4facfe, #00f2fe);
background: linear-gradient(270deg, #43e97b, #38f9d7);

Multiple Color Stops

Gradients aren't limited to two colors. You can add as many color stops as you want, and control exactly where each transition happens:

/* Three colors, evenly distributed */
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);

/* Custom stop positions */
background: linear-gradient(
  90deg,
  #667eea 0%,
  #764ba2 40%,
  #f093fb 100%
);

/* Hard color stops (no transition) */
background: linear-gradient(
  90deg,
  #667eea 0%,
  #667eea 33%,
  #764ba2 33%,
  #764ba2 66%,
  #f093fb 66%,
  #f093fb 100%
);

The last example creates solid color stripes with no transition between them — useful for decorative patterns and progress bars.

Want to experiment visually? Our CSS Gradient Generator lets you drag color stops, adjust angles, and copy the CSS code instantly.

Color Hints (Midpoints)

A color hint is a bare percentage between two color stops that shifts the midpoint of the transition:

/* Default: midpoint at 50% between stops */
background: linear-gradient(#667eea, #f093fb);

/* Shift midpoint to 25% — transition happens earlier */
background: linear-gradient(#667eea, 25%, #f093fb);

/* Shift midpoint to 75% — transition happens later */
background: linear-gradient(#667eea, 75%, #f093fb);

Radial Gradients

Radial gradients radiate outward from a center point in an elliptical or circular shape.

Basic Syntax

/* Default: ellipse at center */
background: radial-gradient(#667eea, #764ba2);

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

/* Positioned at top-left */
background: radial-gradient(circle at top left, #667eea, #764ba2);

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

Size Keywords

Control how far the gradient extends using size keywords:

/* closest-side: ends at the nearest side */
background: radial-gradient(circle closest-side at 30% 30%, #667eea, #764ba2);

/* farthest-corner (default): extends to the farthest corner */
background: radial-gradient(circle farthest-corner at 30% 30%, #667eea, #764ba2);

/* closest-corner and farthest-side are also available */

Creating Spotlight Effects

/* Spotlight on dark background */
background: radial-gradient(
  circle at 50% 50%,
  rgba(102, 126, 234, 0.3) 0%,
  transparent 70%
),
#0a0a0a;

/* Glowing orb */
background: radial-gradient(
  circle at center,
  #667eea 0%,
  #764ba2 40%,
  transparent 70%
);

Conic Gradients

Conic gradients transition colors around a center point, like the sweep of a clock hand. They are perfect for pie charts, color wheels, and decorative elements.

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

/* Pie chart */
background: conic-gradient(
  #667eea 0deg 120deg,
  #f093fb 120deg 240deg,
  #43e97b 240deg 360deg
);

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

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

Repeating Gradients

The repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions tile the gradient pattern infinitely. They're invaluable for creating stripes, geometric patterns, and decorative textures.

Repeating Linear Stripes

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

/* Warning tape pattern */
background: repeating-linear-gradient(
  -45deg,
  #f5c542 0px,
  #f5c542 20px,
  #333 20px,
  #333 40px
);

/* Subtle lined paper */
background: repeating-linear-gradient(
  to bottom,
  transparent 0px,
  transparent 29px,
  #e0e0e0 29px,
  #e0e0e0 30px
);

Repeating Radial Patterns

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

/* Bullseye target */
background: repeating-radial-gradient(
  circle at center,
  #ff0000 0px,
  #ff0000 10px,
  #ffffff 10px,
  #ffffff 20px
);

Gradient Text Effects

One of the most visually striking uses of CSS gradients is applying them to text. This technique uses the gradient as a background, then clips it to the text shape:

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

/* With animation */
.animated-gradient-text {
  background: linear-gradient(
    90deg,
    #667eea, #f093fb, #f5576c, #667eea
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}

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

The key properties are background-clip: text (which clips the background to the text shape) and -webkit-text-fill-color: transparent (which makes the original text color transparent so the gradient shows through).

Gradient Borders

CSS doesn't support border-color as a gradient directly, but you can achieve gradient borders with a few techniques:

Using border-image

.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(135deg, #667eea, #f093fb) 1;
}

/* Note: border-image doesn't work with border-radius */

Using a Background Trick

/* Works with border-radius */
.gradient-border-rounded {
  position: relative;
  background: linear-gradient(135deg, #667eea, #f093fb);
  padding: 3px;
  border-radius: 12px;
}

.gradient-border-rounded > * {
  background: #1a1a1a;
  border-radius: 9px;
  padding: 1rem;
}

/* Using outline/mask technique (modern browsers) */
.gradient-border-mask {
  border: 3px solid transparent;
  background:
    linear-gradient(#1a1a1a, #1a1a1a) padding-box,
    linear-gradient(135deg, #667eea, #f093fb) border-box;
  border-radius: 12px;
}

The background trick with padding-box and border-box is the cleanest solution — it works with border-radius and doesn't require extra markup.

Gradient Animations

You cannot directly animate gradient color stops in CSS (it would require interpolating the background-image property, which isn't animatable). But you can create the illusion of animated gradients using two techniques:

Animating background-position

.animated-gradient {
  background: linear-gradient(
    -45deg,
    #667eea, #764ba2, #f093fb, #f5576c
  );
  background-size: 400% 400%;
  animation: gradient-flow 8s ease infinite;
}

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

By making the gradient larger than its container (background-size: 400% 400%) and shifting background-position, you create a smooth flowing effect.

Using CSS @property for True Color Animation

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

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

.true-animated-gradient {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  transition: --gradient-start 1s, --gradient-end 1s;
}

.true-animated-gradient:hover {
  --gradient-start: #f5576c;
  --gradient-end: #43e97b;
}

The @property rule (part of CSS Houdini) lets browsers understand that custom properties are colors, enabling smooth transitions. This is supported in Chromium-based browsers and Safari.

Layering Multiple Gradients

CSS supports multiple background layers, and gradients can be combined to create complex effects:

/* Gradient + pattern overlay */
.complex-background {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    ),
    linear-gradient(135deg, #667eea, #764ba2);
}

/* Noise texture over gradient */
.textured-gradient {
  background:
    url('/noise.png'),
    linear-gradient(135deg, #667eea, #764ba2);
  background-blend-mode: overlay;
}

/* Mesh gradient effect */
.mesh-gradient {
  background:
    radial-gradient(at 20% 80%, #667eea33 0%, transparent 50%),
    radial-gradient(at 80% 20%, #f093fb33 0%, transparent 50%),
    radial-gradient(at 50% 50%, #43e97b33 0%, transparent 50%),
    #0a0a0a;
}

Performance Considerations

CSS gradients are generally very performant, but there are a few things to keep in mind:

Gradients are not cached like image files — they are rendered on the fly. For very complex gradients with many stops, this can impact render performance on low-end devices.
Animating gradients via background-position can cause repaints. Use will-change: background-position to promote the layer to the GPU.
Large gradient areas with many color stops are more expensive to render than simple two-color gradients.
Prefer transform and opacity animations when possible — they are compositor-only and won't trigger layout or paint.

For most use cases, gradient performance is a non-issue. Only optimize if profiling reveals gradient rendering as an actual bottleneck.

Real-World Gradient Recipes

Here are copy-paste gradient recipes for common UI patterns. Use our CSS Gradient Generator to customize the colors, and our Hex to RGB Converter when you need to add alpha transparency.

Hero Section Background

.hero {
  background: linear-gradient(
    135deg,
    #0c0c1d 0%,
    #1a1a3e 50%,
    #2d1b69 100%
  );
  min-height: 100vh;
}

Card Hover Effect

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1),
    rgba(240, 147, 251, 0.1)
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover::before {
  opacity: 1;
}

Frosted Glass with Gradient

.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

Gradient Divider Line

.divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #667eea,
    transparent
  );
}

Gradient Shadow

.gradient-shadow {
  position: relative;
}

.gradient-shadow::after {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  background: linear-gradient(135deg, #667eea, #f093fb);
  filter: blur(20px);
  opacity: 0.5;
}

Generating Gradients with Tools

While understanding the syntax is essential, building gradients visually is much faster. Our CSS Gradient Generator provides a visual editor where you can:

Add, remove, and drag color stops on a visual timeline.
Switch between linear, radial, and conic gradient types.
Adjust angles with a rotary dial.
Preview the gradient in real time on various element shapes.
Copy the final CSS with one click.

Pair it with the Color Palette Generator to create harmonious color combinations, and the Hex to RGB Converter when you need to convert between color formats or add alpha values.

Wrapping Up

CSS gradients are one of the most expressive tools in the CSS specification. From simple two-color backgrounds to complex animated mesh effects, they can elevate a design without adding a single image file or HTTP request. Master the three gradient functions (linear-gradient, radial-gradient, conic-gradient) and their repeating variants, learn to layer them with multiple backgrounds, and experiment with text effects and animated gradients. The visual possibilities are effectively limitless.

CSS Gradients: A Complete Tutorial with Examples

What Are CSS Gradients?

Linear Gradients

Basic Syntax

Direction Keywords

Using Angles

Multiple Color Stops

Color Hints (Midpoints)

Radial Gradients

Basic Syntax

Size Keywords

Creating Spotlight Effects

Conic Gradients

Repeating Gradients

Repeating Linear Stripes

Repeating Radial Patterns

Gradient Text Effects

Gradient Borders

Using border-image

Using a Background Trick

Gradient Animations

Animating background-position

Using CSS @property for True Color Animation

Layering Multiple Gradients

Performance Considerations

Real-World Gradient Recipes

Hero Section Background

Card Hover Effect

Frosted Glass with Gradient

Gradient Divider Line

Gradient Shadow

Generating Gradients with Tools

Wrapping Up

Try These Tools

Related Articles