CSS Gradients: A Complete Guide to Linear, Radial, and Conic

Before CSS gradients existed, every background gradient was an image — a carefully exported PNG or GIF stretched across a container. Designers would create gradient images in Photoshop, developers would slice them to minimize file size, and any change to the color scheme meant regenerating and re-uploading asset files. This workflow was slow, inflexible, and produced blurry artifacts on high-DPI screens.

CSS gradients eliminated all of these problems. They're generated mathematically by the browser, which means they're resolution-independent (perfectly crisp on any screen density), infinitely scalable (no pixelation at any size), and editable directly in your stylesheet. They require no HTTP requests, so they load faster than image backgrounds. And because they're defined in CSS, they can respond to media queries, use CSS custom properties, and even be animated.

This guide covers every gradient type — linear, radial, conic, and repeating — with both the syntax and the design thinking behind when to use each one.

Choosing the Right Gradient Type

Before diving into syntax, it helps to understand which gradient type suits which design situation.

Linear gradients are the most versatile and most commonly used. They work well for page backgrounds, section dividers, button states, and any design element where you want a directional color shift. If you're unsure which type to use, start with linear.

Radial gradients create circular or elliptical color transitions emanating from a point. They're natural for spotlight effects, glowing elements, vignettes, and any design that should draw the eye toward or away from a center point.

Conic gradients sweep color around a center point like the hands of a clock. They're specialized — perfect for pie charts, color wheels, and decorative radial patterns, but rarely the right choice for general background effects.

Repeating gradients tile a gradient pattern across the element, creating stripes, checkerboards, and other geometric textures. They're powerful for creating complex patterns without images but require precise stop positions to avoid visual artifacts.

Linear Gradients

Linear gradients transition colors along a straight line, defined by a direction (or angle) and a series of color stops.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...);

Direction Options

Directions can be specified as keywords or angles. Keywords are more readable; angles offer finer control.

Using keywords:

/* Top to bottom (default) */
background: linear-gradient(to bottom, red, blue);
background: linear-gradient(red, blue);  /* Same thing */

/* Other directions */
background: linear-gradient(to top, red, blue);
background: linear-gradient(to right, red, blue);
background: linear-gradient(to left, red, blue);

/* Diagonals */
background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(to top left, red, blue);

Using angles:

background: linear-gradient(0deg, red, blue);    /* Bottom to top */
background: linear-gradient(90deg, red, blue);   /* Left to right */
background: linear-gradient(180deg, red, blue);  /* Top to bottom */
background: linear-gradient(270deg, red, blue);  /* Right to left */
background: linear-gradient(45deg, red, blue);   /* Diagonal */

Angle reference:

                0deg
                 ↑
                 |
    270deg ←----+----→ 90deg
                 |
                 ↓
               180deg

Multiple Color Stops

You can use as many color stops as you want. The browser distributes them evenly by default, creating smooth transitions between each adjacent pair. With two colors you get a simple fade; with six or seven, you can create rich, layered gradients that mimic natural phenomena like sunsets or aurora effects.

Add as many colors as you want:

/* Rainbow */
background: linear-gradient(
  to right,
  red,
  orange,
  yellow,
  green,
  blue,
  purple
);

/* Sunset */
background: linear-gradient(
  to bottom,
  #ff6b6b,
  #feca57,
  #48dbfb,
  #1e3799
);

Controlling Color Stop Positions

By default, color stops are distributed evenly across the gradient. Explicit positioning lets you control exactly how much space each color occupies, moving transitions earlier or later to create asymmetric effects. This is how you create gradients where one color dominates while another serves as an accent.

Specify where each color should be:

/* Even distribution (default) */
background: linear-gradient(red, yellow, green);
/* red at 0%, yellow at 50%, green at 100% */

/* Custom positions */
background: linear-gradient(red 0%, yellow 30%, green 100%);
/* More red, quick transition to yellow, gradual to green */

/* Using pixels */
background: linear-gradient(red 100px, blue);
/* Solid red for first 100px, then gradient to blue */

Hard Color Stops (No Gradient)

When two adjacent color stops share the same position, the transition between them is instantaneous — a hard line rather than a smooth blend. This technique is the foundation for creating stripes, split backgrounds, and progress indicators entirely in CSS without any images.

Use the same position for two colors to create hard lines:

/* Two-tone split */
background: linear-gradient(
  to right,
  red 50%,
  blue 50%
);

/* Stripes */
background: linear-gradient(
  to right,
  red 0%,
  red 33.33%,
  white 33.33%,
  white 66.66%,
  blue 66.66%,
  blue 100%
);

Color Hints (Midpoints)

Control where the midpoint of a transition falls:

/* Default: midpoint at 50% */
background: linear-gradient(red, blue);

/* Midpoint at 25% - more red */
background: linear-gradient(red, 25%, blue);

/* Midpoint at 75% - more blue */
background: linear-gradient(red, 75%, blue);

Radial Gradients

Radial gradients emanate from a central point outward, creating circular or elliptical color transitions. They're naturally suited to effects that draw attention — spotlights, glowing buttons, depth illusions, and vignette overlays. The key design decision with radial gradients is choosing between circles (uniform in all directions) and ellipses (which stretch to fill the container's aspect ratio).

Basic Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

Shape Options

/* Ellipse (default) - stretches to fit container */
background: radial-gradient(ellipse, red, blue);

/* Circle - always a perfect circle */
background: radial-gradient(circle, red, blue);

Size Keywords

/* closest-side: gradient ends at nearest edge */
background: radial-gradient(circle closest-side, red, blue);

/* farthest-side: gradient ends at farthest edge */
background: radial-gradient(circle farthest-side, red, blue);

/* closest-corner: gradient ends at nearest corner */
background: radial-gradient(circle closest-corner, red, blue);

/* farthest-corner (default): gradient ends at farthest corner */
background: radial-gradient(circle farthest-corner, red, blue);

Position

/* Center (default) */
background: radial-gradient(circle at center, red, blue);

/* Keywords */
background: radial-gradient(circle at top, red, blue);
background: radial-gradient(circle at bottom right, red, blue);
background: radial-gradient(circle at left, red, blue);

/* Percentages */
background: radial-gradient(circle at 25% 75%, red, blue);

/* Pixels */
background: radial-gradient(circle at 100px 50px, red, blue);

Practical Examples

/* Spotlight effect */
background: radial-gradient(
  circle at center,
  white,
  transparent 70%
);

/* Glowing orb */
background: radial-gradient(
  circle,
  #00ff00,
  #004400 50%,
  transparent 70%
);

/* Vignette effect */
background: radial-gradient(
  ellipse at center,
  transparent 50%,
  rgba(0, 0, 0, 0.8) 100%
);

Conic Gradients

Conic gradients are the newest addition to the gradient family. Unlike linear gradients (which transition along a line) and radial gradients (which transition from a center outward), conic gradients sweep color around a center point, like the hands of a clock moving through different colors. This makes them uniquely suited to a few specific design patterns.

Basic Syntax

background: conic-gradient(from angle at position, color1, color2, ...);

Color Wheel

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

Pie Charts

Conic gradients with hard stops create pie charts — one of the few CSS-only chart techniques that's both simple and production-ready. By specifying percentage ranges for each color, you define wedge sizes. Adding border-radius: 50% rounds the element into a circle.

/* Simple pie chart */
background: conic-gradient(
  #ff6b6b 0% 25%,      /* 25% red */
  #4ecdc4 25% 50%,     /* 25% teal */
  #45b7d1 50% 75%,     /* 25% blue */
  #96ceb4 75% 100%     /* 25% green */
);
border-radius: 50%;

/* Donut chart (with inner circle) */
.donut {
  background: conic-gradient(
    #ff6b6b 0% 30%,
    #4ecdc4 30% 70%,
    #45b7d1 70% 100%
  );
  border-radius: 50%;

  /* Cut out center */
  mask: radial-gradient(
    circle,
    transparent 50%,
    black 50%
  );
}

Starting Angle and Position

/* Start from top (0deg is right by default) */
background: conic-gradient(
  from 0deg,
  red, blue
);

/* Start from 90deg */
background: conic-gradient(
  from 90deg,
  red, blue
);

/* Off-center position */
background: conic-gradient(
  at 25% 25%,
  red, blue
);

/* Combined */
background: conic-gradient(
  from 45deg at 75% 75%,
  red, yellow, green, blue, red
);

Repeating Gradients

Repeating gradients tile a gradient pattern across the element, filling the entire background. They're the foundation for creating geometric patterns — stripes, checkerboards, concentric circles, starbursts — entirely in CSS. The key to making them work is defining precise stop positions so the pattern tiles seamlessly.

Repeating Linear Gradient

/* Stripes */
background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

/* Subtle lines */
background: repeating-linear-gradient(
  to bottom,
  transparent,
  transparent 20px,
  rgba(0, 0, 0, 0.05) 20px,
  rgba(0, 0, 0, 0.05) 21px
);

Repeating Radial Gradient

/* Concentric circles */
background: repeating-radial-gradient(
  circle,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

/* Bullseye */
background: repeating-radial-gradient(
  circle at center,
  red 0px,
  red 10px,
  white 10px,
  white 20px
);

Repeating Conic Gradient

/* Starburst */
background: repeating-conic-gradient(
  #606dbc 0deg 10deg,
  #465298 10deg 20deg
);

/* Checkerboard (with clever use) */
background: repeating-conic-gradient(
  #ccc 0deg 90deg,
  #fff 90deg 180deg
);
background-size: 40px 40px;

Layering Multiple Gradients

One of the most powerful gradient techniques is layering — using transparency to stack multiple gradients on top of each other. Each gradient in the background shorthand is rendered in order, with the first listed appearing on top. By using transparent or rgba colors, lower layers show through, creating depth and complexity that no single gradient can achieve.

Combine multiple gradients using transparency:

/* Crosshatch pattern */
background:
  linear-gradient(45deg, transparent 45%, #ccc 45%, #ccc 55%, transparent 55%),
  linear-gradient(-45deg, transparent 45%, #ccc 45%, #ccc 55%, transparent 55%);
background-size: 20px 20px;

/* Depth effect */
background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%),
  linear-gradient(135deg, #667eea, #764ba2);

/* Complex pattern */
background:
  linear-gradient(135deg, rgba(255,0,0,0.3), transparent),
  linear-gradient(225deg, rgba(0,255,0,0.3), transparent),
  linear-gradient(315deg, rgba(0,0,255,0.3), transparent),
  linear-gradient(45deg, rgba(255,255,0,0.3), transparent);

Gradient Text

Apply gradients to text:

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

Important: This technique clips the background to the text shape, so the text becomes transparent to show the gradient behind it.

Gradient Borders

/* Using border-image */
.gradient-border {
  border: 4px solid;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

/* Using background (more flexible) */
.gradient-border {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 4px solid transparent;
  border-radius: 10px;
}

Animating Gradients

Gradients can't be directly animated, but you can animate their properties:

Animating Background Position

.animated-gradient {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #8b00ff,
    #ff0000
  );
  background-size: 200% 100%;
  animation: gradient-shift 3s linear infinite;
}

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

Using CSS Variables

.animated-gradient {
  --angle: 0deg;
  background: linear-gradient(var(--angle), #667eea, #764ba2);
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --angle: 360deg; }
}

Note: Animating CSS variables requires registering the property:

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

Common Patterns

Noise/Grain Effect

.grain {
  background-image:
    url("data:image/svg+xml,..."), /* SVG noise pattern */
    linear-gradient(135deg, #667eea, #764ba2);
}

Glassmorphism

.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.2);
}

Mesh Gradients (Approximation)

.mesh {
  background-color: #ff6b6b;
  background-image:
    radial-gradient(at 40% 20%, #ff0080 0px, transparent 50%),
    radial-gradient(at 80% 0%, #ffcc00 0px, transparent 50%),
    radial-gradient(at 0% 50%, #00ff80 0px, transparent 50%),
    radial-gradient(at 80% 50%, #0080ff 0px, transparent 50%),
    radial-gradient(at 0% 100%, #ff00ff 0px, transparent 50%);
}

Accessibility Considerations

Gradients create visual richness, but they can also create accessibility problems if text is placed over them without care. The fundamental issue is contrast: a gradient transitions between colors, which means contrast between the text and its background varies across the gradient. Text that's readable at one end may be illegible at the other.

The safest approach is to darken the entire gradient range to ensure sufficient contrast with light text, or lighten it for dark text. A semi-transparent overlay between the gradient and the text provides consistent contrast regardless of gradient position:

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Darken for white text */
}

.hero-text {
  position: relative;
  color: white;
}

For users with vestibular disorders, animated gradients can trigger motion sensitivity symptoms. Always wrap gradient animations in a prefers-reduced-motion media query:

.animated-gradient {
  background-size: 200% 100%;
  animation: gradient-shift 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
    background-size: 100% 100%;
  }
}

Color blindness affects approximately 8% of men and 0.5% of women. Gradients that rely on red-green transitions to convey meaning (like status indicators transitioning from red to green) are invisible to the most common forms of color blindness. Supplement color information with text labels, icons, or patterns.

Performance

CSS gradients are computationally rendered by the browser's painting engine. For simple two-color linear gradients, the performance cost is negligible — comparable to a solid background color. However, complex gradients can impact rendering performance in measurable ways.

What's cheap: Simple linear gradients with 2-3 color stops. The browser computes these efficiently, and they render as fast as solid colors in practice.

What's expensive: Layering many gradients (5+) on large elements forces the browser to composite multiple layers for every pixel. Large radial gradients with farthest-corner sizing (the default) on very large elements can also be costly, because the gradient extends far beyond the visible area.

What's very expensive: Animating gradients by changing their color values triggers a repaint on every frame. Animating background-position on a larger-than-element gradient is significantly cheaper because it uses the compositor and avoids repaints.

The practical advice: use gradients freely for static backgrounds. For animations, prefer the background-position technique over changing gradient values. If you're stacking many gradients for pattern effects, test on lower-powered devices to ensure smooth performance.

Browser Support and Fallbacks

All modern browsers support gradients. For older browsers:

.gradient-bg {
  /* Fallback solid color */
  background-color: #667eea;

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

Quick Reference

CSS gradients are one of those features with a deceptively simple syntax hiding enormous creative potential. Start with basic two-color linear gradients, experiment with color stop positions and hard stops, then layer gradients to create patterns and depth effects. The best way to build intuition is to experiment visually and see how each parameter change affects the result.

Use our Gradient Generator to build and export beautiful gradients with a visual editor — experiment with colors, directions, and layering, all in your browser.