How CSS Gradients Work

A CSS gradient is a generated image, not a color. That one fact explains a lot of its behavior: it goes wherever an image goes, so you set it on background-image, you can layer several of them, and you can stretch or repeat them. Once you treat gradients as images that happen to be made of color transitions, the syntax starts to make sense.

There are three gradient functions in common use. Each blends colors in a different shape, and each takes a list of color stops that control where one color becomes the next.

Linear gradients

A linear gradient blends colors along a straight line. The first argument sets the direction, and the rest are color stops. Direction can be a keyword or an angle.

.box {
  background-image: linear-gradient(to right, #4f46e5, #06b6d4);
}

Here to right means the line runs from the left edge to the right edge, so the color shifts from indigo to cyan across the box. The keywords are to top, to right, to bottom, to left, and the diagonal pairs like to top right.

Angles in degrees

For precise control, pass an angle instead of a keyword. The angle describes the direction the gradient line points, measured clockwise from straight up. So 0deg points up, 90deg points right, 180deg points down, and 45deg runs diagonally toward the top right.

.box {
  background-image: linear-gradient(135deg, #f97316, #db2777);
}

At 135deg the line points toward the bottom right, which is the direction a lot of hero backgrounds use because the diagonal feels more dynamic than a flat top-to-bottom fade.

Color stops

Each color in the list can carry a position, written as a percentage or length. The position tells the browser where that color should sit along the gradient line. Without positions, the colors spread out evenly.

.box {
  background-image: linear-gradient(
    to right,
    #10b981 0%,
    #10b981 40%,
    #3b82f6 60%,
    #3b82f6 100%
  );
}

Repeating a color at two positions creates a hard edge instead of a blend. In the example above the green holds solid until 40 percent, transitions to blue between 40 and 60 percent, then blue holds to the end. This trick builds stripes and split backgrounds without any extra elements.

Multi-stop blends

You are not limited to two colors. A multi-stop gradient lists as many colors as you want, and the browser blends between each neighboring pair. This is how you build smooth sunset-style backdrops.

.sky {
  background-image: linear-gradient(
    to bottom,
    #1e3a8a,
    #7c3aed,
    #ec4899,
    #f59e0b
  );
}

Keep the hues close on the color wheel for a soft, natural look. Jumping across the wheel produces muddy gray zones where opposite colors meet in the middle.

Transparency and overlays

Because gradients accept any color value, you can fade to transparent using rgba or an eight-digit hex with an alpha channel. A gradient that fades to transparent is the standard way to darken the bottom of a hero image so overlaid text stays readable.

.hero {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0)
  );
}

Since a gradient is an image, you can stack it over a photo by listing both in background-image, separated by a comma. The first one listed sits on top.

.hero {
  background-image:
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)),
    url('/photo.jpg');
  background-size: cover;
}

Radial gradients

A radial gradient blends outward from a center point in a circle or ellipse rather than along a line. It is the right choice for spotlights, glows, and soft vignettes.

.glow {
  background-image: radial-gradient(
    circle at center,
    #fde047,
    #f97316
  );
}

You control the shape with circle or ellipse, and the center with the at keyword followed by a position. A radial gradient fading from a light color to transparent makes a convincing light bloom behind a button or card.

Conic gradients

A conic gradient sweeps colors around a center point like the hands of a clock. This is what powers color wheels, pie charts, and loading spinners done in pure CSS.

.wheel {
  background-image: conic-gradient(
    from 0deg,
    red, yellow, lime, cyan, blue, magenta, red
  );
  border-radius: 50%;
}

Repeating the first color at the end closes the loop so the sweep has no visible seam. Pair conic gradients with hard color stops and you get a flat pie chart without a charting library.

Putting it to use

Buttons benefit from a subtle two-stop linear gradient that adds depth without shouting. Heroes lean on diagonal multi-stop blends or a photo plus a dark overlay. Decorative glows come from radial gradients fading to transparent. The functions are simple on their own; the craft is in choosing colors that sit close together and positioning stops so the blend feels intentional rather than accidental.