Web Development 12 min read

CSS Gradients Explained: Linear, Radial, and Conic — With Examples

CSS gradients create smooth color transitions rendered by the browser — no images needed. Here's how linear, radial, and conic gradients work, with syntax breakdowns, practical examples, and common pitfalls.

CSS Gradients Explained: Linear, Radial, and Conic — With Examples

A CSS gradient is a smooth transition between two or more colors, rendered entirely by the browser. No image files are loaded. Gradients scale perfectly at any resolution, produce zero HTTP requests, and weigh just a few bytes of CSS.

CSS supports three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each also has a repeating variant. This guide explains how each type works, breaks down the syntax, and shows practical patterns you can use immediately.

Quick Reference

/* Linear: colors flow along a straight line */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Radial: colors radiate from a center point */
background: radial-gradient(circle at center, #00d4aa, #3b82f6);

/* Conic: colors sweep around a center point */
background: conic-gradient(from 0deg, red, yellow, green, blue, red);

All three are applied via the background or background-image property. Gradients are classified as images in CSS — they replace or layer on top of background-color.

Linear Gradients

A linear gradient transitions colors along a straight line. You control the direction (angle or keyword) and the color stops.

Syntax

background: linear-gradient(<direction>, <color-stop>, <color-stop>, ...);

Direction values

Value Effect
180deg (default) Top → bottom
0deg Bottom → top
90deg Left → right
270deg Right → left
135deg Top-left → bottom-right (diagonal)
to right Left → right (keyword syntax)
to bottom left Top-right → bottom-left

Important: In CSS, 0deg points upward (bottom→top) and angles increase clockwise. This is different from standard math conventions where 0° points right.

Examples

/* Vertical: blue to teal */
background: linear-gradient(180deg, #667eea, #4ecdc4);

/* Horizontal: pink to yellow */
background: linear-gradient(90deg, #fa709a, #fee140);

/* Diagonal: three colors */
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #4facfe 100%);

/* Using keywords instead of degrees */
background: linear-gradient(to bottom right, #ff0844, #ffb199);

Radial Gradients

Radial gradients radiate colors outward from a center point. The shape can be a circle or an ellipse.

Syntax

background: radial-gradient(<shape> <size> at <position>, <color-stops>);

Shape and position

  • Shape: circle or ellipse (default: ellipse)
  • Position: any combination of keywords (center, top left, bottom right) or coordinates (50% 30%, 100px 200px)
  • Size: closest-side, closest-corner, farthest-side, farthest-corner (default), or explicit lengths

Examples

/* Circle from center */
background: radial-gradient(circle at center, #00d4aa, #3b82f6);

/* Ellipse from top-left corner */
background: radial-gradient(ellipse at top left, #fa709a, #fee140);

/* Spotlight effect with transparent edge */
background: radial-gradient(circle at 30% 50%, #4facfe, #00f2fe 60%, transparent);

/* Explicit size */
background: radial-gradient(circle 200px at center, #667eea, transparent);

Conic Gradients

Conic gradients sweep colors around a center point, like a color wheel or pie chart. They were the last gradient type to gain browser support (all major browsers since 2020).

Syntax

background: conic-gradient(from <angle> at <position>, <color-stops>);

Examples

/* Color wheel */
background: conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red);

/* Simple two-color sweep */
background: conic-gradient(from 0deg at center, #667eea, #764ba2);

/* Pie chart effect (hard stops) */
background: conic-gradient(#ff6b6b 0deg 120deg, #4ecdc4 120deg 240deg, #fee140 240deg 360deg);

Conic gradients are especially useful for circular progress indicators, pie charts, and decorative backgrounds.

Color Stops in Detail

Color stops are the core building block of every gradient. Each stop specifies what color appears and where it appears.

Basic stop syntax

/* Color + position */
#ff6b6b 0%        /* red at the start */
#fee140 50%       /* yellow at the midpoint */
#4ecdc4 100%      /* teal at the end */

Auto-distribution

If you omit positions, the browser distributes colors evenly:

/* These are equivalent: */
linear-gradient(red, yellow, blue)
linear-gradient(red 0%, yellow 50%, blue 100%)

Hard edges

Placing two stops at the same position creates an instant color change with no blending:

/* Sharp red-to-blue split at the midpoint */
background: linear-gradient(90deg, red 50%, blue 50%);

Multiple positions per color

A single color can have two positions, creating a solid band:

/* Red from 0-30%, then fade to blue from 30-100% */
background: linear-gradient(90deg, red 0% 30%, blue 100%);

Repeating Gradients

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

Use fixed units (px, em) rather than percentages to define the repeat size:

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

/* Concentric rings */
background: repeating-radial-gradient(
  circle at center,
  #00d4aa 0px,
  #00d4aa 8px,
  transparent 8px,
  transparent 16px
);

Practical Patterns

Full-page background

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Gradient text

h1 {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Overlay on an image

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url('hero.jpg') center / cover;
}

Gradient border

.card {
  border: 3px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

CSS-only progress bar

.progress {
  background: linear-gradient(90deg, #4ecdc4 var(--progress), #e0e0e0 var(--progress));
}

Common Mistakes

  1. Using background-color for gradients. Gradients are images, not colors. Use background or background-image. background-color: linear-gradient(...) is invalid CSS and will be ignored.

  2. No fallback for older browsers. Always set a solid background-color before the gradient declaration. If the gradient isn't supported, the fallback color displays instead.

  3. Too many color stops. Two or three well-chosen colors usually produce cleaner results than five or six. More stops increase visual noise.

  4. Confusing angle direction. CSS angles start at the bottom (0deg = bottom→top) and go clockwise. This trips up developers who expect 0deg to point right (math convention).

  5. Invisible gradients from identical colors. If start and end colors are too similar, the gradient looks flat. Check your color values.

  6. Percentage stops in repeating gradients. Use fixed units (px, em) with repeating-linear-gradient(). Percentage-based stops don't repeat because the gradient already spans 100% of the element.

Performance Notes

CSS gradients are lightweight:

  • Zero HTTP requests — no images to download
  • Resolution-independent — crisp on any screen, including 4K and Retina
  • Tiny CSS footprint — a typical gradient adds 50–150 bytes to your stylesheet
  • GPU-composited in most browsers for smooth rendering

For most use cases, gradients are more performant than equivalent image backgrounds. The only exception is extremely complex gradients with dozens of color stops, which can be slightly slower to paint on low-end devices.

Browser Support

Gradient type Chrome Firefox Safari Edge
linear-gradient 26+ 16+ 6.1+ 12+
radial-gradient 26+ 16+ 6.1+ 12+
conic-gradient 69+ 83+ 12.1+ 79+
repeating-* 26+ 16+ 6.1+ 12+

Linear and radial gradients have near-universal support. Conic gradients work in all modern browsers. Vendor prefixes (-webkit-) are no longer needed for any gradient type in current browsers.

Gradient Direction Quick Reference

CSS angle Keyword equivalent Direction
0deg to top Bottom → Top
45deg to top right Bottom-left → Top-right
90deg to right Left → Right
135deg to bottom right Top-left → Bottom-right
180deg to bottom Top → Bottom (default)
225deg to bottom left Top-right → Bottom-left
270deg to left Right → Left
315deg to top left Bottom-right → Top-left

FAQ

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, rendered by the browser without loading an image. Applied via background or background-image, gradients scale perfectly at any resolution and have minimal performance cost.

When should I use a gradient instead of an image?

Use gradients for smooth color transitions, overlays, decorative backgrounds, and simple patterns. Use images when you need photographic content, complex textures, or illustrations that can't be expressed as color transitions.

Can I layer multiple gradients?

Yes. Comma-separate them in a single background declaration. Earlier gradients are painted on top of later ones:

background:
  linear-gradient(rgba(0,0,0,0.3), transparent),
  radial-gradient(circle at top right, #667eea, transparent),
  linear-gradient(135deg, #f093fb, #f5576c);

How do I make a gradient transparent?

Use transparent as a color stop, or use rgba()/hsla() colors with alpha values: linear-gradient(#667eea, transparent).

Can I animate a CSS gradient?

Not directly with transition. But you can animate background-position or background-size to create movement. With @property, you can register custom properties and animate individual color values.

What's the difference between deg and keyword directions?

deg values and keywords produce the same result — 90deg equals to right, 180deg equals to bottom. Keywords are sometimes more readable; degree values give you finer control (like 135deg for diagonals).

How do I create diagonal stripes with CSS?

Use repeating-linear-gradient with a 45-degree angle and hard color stops:

background: repeating-linear-gradient(
  45deg,
  #667eea 0px 10px,
  #764ba2 10px 20px
);

Related Tools

Related Tools

Gradient Generator

Create beautiful CSS gradients with live preview and copy-ready code

Color Picker

Visual color picker with HEX, RGB, HSL conversion and color harmonies

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK formats

Color Palette Generator

Generate harmonious color palettes with complementary, analogous, and triadic schemes