CSS Gradients: Linear, Radial, and Conic Backgrounds

A flat block of color does the job, but a smooth blend from one color into another instantly makes a design feel more polished. That blend is a gradient, and the great thing is you don’t need Photoshop or an image file to make one. CSS builds gradients for you with a single line of code — and because it’s pure CSS, the result stays razor-sharp at any size and weighs nothing in your page.

Back when you learned about colors and backgrounds, you set background to a single color. A gradient slots into that exact same background property — it’s just a value that happens to describe a transition between colors instead of one solid color. Let’s see how each kind works.

What a gradient actually is

In CSS, a gradient isn’t a color — it’s an image that the browser generates on the fly. That’s why it lives in background (and anywhere else that accepts an image, like background-image). You hand CSS a list of colors and some instructions about how they should flow, and it paints a smooth transition between them.

There are three flavours, each created by its own function:

• linear-gradient() — colors blend along a straight line.
• radial-gradient() — colors blend outward from a center point, in circles or ellipses.
• conic-gradient() — colors sweep around a center point like the slices of a pie.

We’ll take them one at a time, starting with the one you’ll reach for most.

Linear gradients

A linear gradient blends colors along a straight line. The simplest version takes two colors and fades from the first to the second, top to bottom:

.box {
  background: linear-gradient(#00B8E6, #072f3d);
}

By default the line runs top to bottom, so the first color sits at the top and the second at the bottom. To change the direction, add an angle or a keyword as the first argument:

.box {
  /* angle: 0deg points up, 90deg points right, 180deg points down */
  background: linear-gradient(90deg, #00B8E6, #072f3d);

  /* or use keywords */
  background: linear-gradient(to right, #00B8E6, #072f3d);
  background: linear-gradient(to bottom right, #00B8E6, #072f3d);
}

Two ways to set direction, and they read very differently:

The angle version gives you fine control — 45deg is a clean diagonal — while the keyword version reads almost like English. Use whichever makes the code clearer to you.

Adding more colors

A gradient isn’t limited to two colors. List as many as you like, separated by commas, and CSS spaces them out evenly and blends between each pair:

.rainbow {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    violet
  );
}

Each color you add is called a color stop. With no extra instructions, the stops are distributed evenly across the gradient. But you can also pin a stop to an exact position to control where each color lands.

Color stops: controlling where colors sit

Put a percentage (or a length) after a color, and you tell CSS exactly where that color should be at full strength:

.box {
  background: linear-gradient(
    to right,
    #00B8E6 0%,
    #00B8E6 50%,   /* first color holds for the first half */
    #072f3d 50%,   /* second color starts immediately */
    #072f3d 100%
  );
}

That snippet produces a hard split down the middle — half cyan, half dark teal, with no blend at all. The trick is putting two stops at the same position (50% here): the transition has zero distance to travel, so it snaps instantly. That’s how you make crisp stripes and two-tone blocks with a gradient.

Move the stops apart and you get a soft blend again; bring them together and the edge sharpens. This single idea — where each color stop sits — is most of what controls how a gradient looks.

Radial gradients

Where a linear gradient flows along a line, a radial gradient spreads outward from a center point — think of a glow or a spotlight. The first color sits in the middle and fades to the next as you move toward the edges:

.box {
  background: radial-gradient(#00B8E6, #072f3d);
}

By default the shape is an ellipse that fills the box and the center is, well, centered. You can change both. Set the shape to circle for a perfectly round blend, and use at to move the center anywhere:

.box {
  /* a round glow positioned in the top-left */
  background: radial-gradient(circle at top left, #00B8E6, #072f3d);

  /* a circle of a specific size */
  background: radial-gradient(circle 120px at center, #00B8E6, #072f3d);
}

Color stops work the same as in linear gradients — add positions to control how quickly the center color gives way to the outer one. Radial gradients are perfect for soft background glows, spotlight effects behind a hero section, or giving a flat circle a subtle three-dimensional sheen.

Conic gradients

A conic gradient sweeps its colors around a center point rather than outward from it — like the way colors are arranged on a color wheel, or the slices of a pie chart. The colors rotate around the center:

.box {
  background: conic-gradient(#00B8E6, #4fd6f5, #072f3d, #00B8E6);
}

Because the sweep goes all the way around, repeating the first color at the end (as above) makes the loop join seamlessly. Conic gradients shine for a few specific jobs: pie and donut charts, color pickers, and loading spinners. Using sharp color stops, you can even build a real pie chart with nothing but CSS:

.pie {
  border-radius: 50%;
  background: conic-gradient(
    #00B8E6 0% 40%,    /* 40% slice */
    #4fd6f5 40% 75%,   /* 35% slice */
    #072f3d 75% 100%   /* 25% slice */
  );
}

Each slice is a pair of stops with no blend between them, and border-radius: 50% rounds the square into a circle. That’s a functioning pie chart in a handful of lines — no chart library required.

Transparency and overlays

Gradients can fade to transparent, not just to another color. Use a color with an alpha channel — like rgba() or a hex with an alpha — and one end of the gradient becomes see-through:

.overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),   /* dark at the bottom */
    rgba(0, 0, 0, 0)      /* fully transparent at the top */
  );
}

This is one of the most useful gradient tricks in real-world design. Lay that overlay on top of a photo and the bottom darkens just enough to make white caption text readable, while the top of the image stays clear and untouched. You’ve seen this gradient on basically every hero banner and photo card on the web — now you know exactly how it’s made.

Layering multiple gradients

You can stack several gradients in a single background by separating them with commas. The first one listed sits on top, so earlier gradients need some transparency for the ones beneath to show through:

.fancy {
  background:
    radial-gradient(circle at top right, rgba(0, 184, 230, 0.4), transparent 60%),
    linear-gradient(to bottom, #0a1620, #072f3d);
}

Here a soft cyan glow in the top-right corner is layered over a dark vertical gradient. Layering is how the lush, multi-toned backgrounds you see on modern landing pages are built — each effect is its own gradient, stacked into one property.

Repeating gradients

If you want a pattern to tile across an element, the repeating-linear-gradient() and repeating-radial-gradient() functions repeat your color stops over and over once they reach the last position:

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #00B8E6 0px,
    #00B8E6 10px,
    #072f3d 10px,
    #072f3d 20px
  );
}

That gives you classic diagonal stripes — a 10px cyan band, then a 10px dark band, repeating forever. It’s a tidy way to make warning tape, progress-bar textures, or subtle background patterns without a single image file.

A real example: a gradient button

Let’s pull a few of these ideas into something you’d genuinely ship — a button with a smooth gradient background that shifts on hover:

.btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #00B8E6, #4fd6f5);
}

.btn:hover {
  background: linear-gradient(135deg, #4fd6f5, #00B8E6);
}

<button class="btn">Get started</button>

A diagonal gradient gives the button depth, and swapping the two colors on hover makes it appear to “flip” — a small touch that feels responsive and alive. Pair it with a smooth fade and the effect is genuinely premium for just a few lines of CSS.

Bonus: gradient text

One stylish trick worth knowing: you can clip a gradient to the shape of text, so the letters themselves are filled with the blend. It takes a small combination of properties:

.gradient-text {
  background: linear-gradient(to right, #00B8E6, #4fd6f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<h1 class="gradient-text">Bright headline</h1>

The gradient is painted as the background, then background-clip: text clips it to the letter shapes, and color: transparent lets the gradient show through where the text used to be. It’s a popular look for hero headlines, and now it’s in your toolkit.

Wrapping up

Gradients turn flat color into something with depth and motion, and they cost nothing in download size because the browser draws them for you. Here’s what you’ve got down:

• A gradient is an image CSS generates, so it goes in background / background-image.
• linear-gradient() blends along a line; set direction with an angle (90deg) or keyword (to right).
• radial-gradient() blends outward from a center — use circle and at to shape and position it.
• conic-gradient() sweeps around a center, perfect for pie charts and color wheels.
• Color stops with percentages control where each color sits; two stops at the same position make a hard edge for stripes and pie slices.
• Fade to transparent for photo overlays, layer multiple gradients with commas, and repeat them for tiling patterns.

Gradients are one of those small techniques that quietly lift a design from “fine” to “polished.” Next up in CSS, we’ll look at box and text shadows — another way to add depth that pairs beautifully with everything you just learned.