Mastering CSS Gradients: A Complete Guide to Linear, Radial & Conic

What Are CSS Gradients?

A CSS gradient is a special type of <image> data type in CSS. Unlike a traditional image file (PNG, JPG, SVG), gradients are generated by the browser using mathematical calculations. This means they scale perfectly at any resolution, never pixelate, and add zero network requests to your page load.

CSS supports three types of gradients, each with a repeating variant:

• linear-gradient() — transitions along a straight line
• radial-gradient() — transitions outward from a center point
• conic-gradient() — transitions around a center point (like a color wheel)

Since gradients are images, they work anywhere the CSS background-image property is accepted — including backgrounds, borders, list markers, and even masks.

Linear Gradients

The most common gradient type. A linear gradient creates a color transition along a straight line, defined by an angle or direction keyword.

/* Basic linear gradient */
background: linear-gradient(135deg, #7c6fff, #ff6fb0);

/* Using direction keywords */
background: linear-gradient(to right, #7c6fff, #ff6fb0);

/* Multiple color stops */
background: linear-gradient(
  90deg,
  #7c6fff 0%,
  #c56fff 50%,
  #ff6fb0 100%
);

The angle parameter controls the direction of the gradient line. 0deg points upward, 90deg points right, 180deg points down, and so on. You can also use keywords like to right, to bottom left, etc.

Color Stop Positions

Each color in a gradient can have an explicit position (percentage or length). If omitted, colors are distributed evenly. You can create sharp edges by placing two stops at the same position:

/* Sharp edge (no transition) */
background: linear-gradient(
  90deg,
  #7c6fff 50%,
  #ff6fb0 50%
);

/* Uneven distribution */
background: linear-gradient(
  90deg,
  #7c6fff 0%,
  #7c6fff 30%,
  #ff6fb0 30%,
  #ff6fb0 100%
);

Radial Gradients

Radial gradients radiate outward from a center point. They're perfect for spotlight effects, glowing elements, and creating depth in UI designs.

/* Basic radial gradient */
background: radial-gradient(circle, #7c6fff, #0a0a0f);

/* Elliptical shape at a specific position */
background: radial-gradient(
  ellipse at 30% 40%,
  rgba(124, 111, 255, 0.4),
  transparent 70%
);

/* Sized radial gradient */
background: radial-gradient(
  circle 200px at center,
  #7c6fff,
  transparent
);

Conic Gradients

Conic gradients sweep color transitions around a center point, like the hands of a clock. They're great for pie charts, color wheels, and decorative elements.

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

/* Pie chart segment */
background: conic-gradient(
  #7c6fff 0deg 120deg,
  #ff6fb0 120deg 240deg,
  #6fb1ff 240deg 360deg
);

Working with Multiple Color Stops

The real power of CSS gradients comes from combining multiple color stops. You can create complex, rich color transitions that would be difficult to achieve with flat colors or images.

When working with many stops, keep in mind that the transition between adjacent stops should feel natural. Avoid placing complementary colors (e.g., red and green) next to each other — the transition will pass through a muddy brown middle. Instead, route through an intermediate hue.

Advanced Techniques

Gradient Text

One of the most popular modern CSS tricks — applying a gradient to text instead of a solid color:

.gradient-text {
  background: linear-gradient(135deg, #7c6fff, #ff6fb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Layered Gradients

CSS allows multiple backgrounds, meaning you can stack gradients on top of each other for complex effects:

.layered {
  background:
    radial-gradient(circle at 20% 50%, rgba(124,111,255,0.3), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255,111,176,0.3), transparent 50%),
    linear-gradient(180deg, #0a0a0f, #1a1a3e);
}

Repeating Gradients

The repeating-linear-gradient() and repeating-radial-gradient() functions tile a gradient pattern across the element. They're perfect for stripes, checkerboards, and decorative backgrounds:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #7c6fff,
  #7c6fff 10px,
  #0a0a0f 10px,
  #0a0a0f 20px
);

Performance Considerations

CSS gradients are generally very performant since they're rendered by the browser's GPU. However, there are a few things to keep in mind:

• Avoid animating gradient values directly — changing color stops triggers a repaint. Instead, animate the element's opacity or use CSS custom properties with @property for registered houdini properties.
• Complex gradients with many stops on large elements can be slightly slower to paint than a single solid color, but the difference is negligible on modern hardware.
• Gradients are smaller than images — a gradient definition is just a few bytes of CSS, compared to kilobytes or megabytes for an equivalent image file.

Browser Support

linear-gradient() and radial-gradient() have had excellent browser support since 2013 and work in all modern browsers. conic-gradient() has been supported in all major browsers since 2020 (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+).

The -webkit- prefix is no longer needed for gradient functions, but you'll still need -webkit-background-clip: text for the gradient text technique.