Gradients

Why gradients are fun to work with

Gradients look fancy, but under the hood they are just math-painted backgrounds. You give the browser a direction and a list of colors, and it smoothly blends from one color stop to the next.

There are three main gradient functions you will see in CSS: linear-gradient() for straight lines, radial-gradient() for circles and blobs, and conic-gradient() for pie-chart style sweeps.

Each one takes a direction or position and a list of colors, often with extra values like percentages or degrees. Those extra values are just telling the browser where each color should start or end, which lets you go from "vibe" to "very precise design tool" pretty quickly.

Linear Gradient

The linear-gradient() function draws a straight line of color. The basic syntax is linear-gradient(direction, color-stop, color-stop, ...). If you skip the direction, the browser uses a default of top-to-bottom.

Color stops are just the colors you pass in. If you only list colors, the stops are spread out evenly. You can add percentages after a color (like blue 30%) to say "start this color here".

.class {
  background: linear-gradient(blue, DeepPink, green);
}

You can also use direction keywords such as to left, to right, to top, and to bottom. These come right after the word to and control which way the gradient line points.

.linear-top {
    background: linear-gradient(to top, blue, DeepPink)
}
.linear-right {
    background: linear-gradient(to right, blue, DeepPink)
}
.linear-left {
    background: linear-gradient(to left, blue, DeepPink)
}
.linear-top-right {
   background: linear-gradient(to top right, blue, DeepPink)
}

You can also pass a real angle like 45deg or 135deg. Here, 0deg points up, and the angle grows clockwise. So 90deg is to the right, 180deg is down, and so on.

Adding color stop values (like blue 5% or DeepPink 60%) tells the browser where to blend between your colors, which is perfect for sharp edges or off-center fades.

.linear-specific-angle {
    background: linear-gradient(60deg, blue 5%, DeepPink)
}
.linear-specific-angle-more {
    background: linear-gradient(60deg, blue 50%, DeepPink)
}

You can ultimately pass as many colors and positions as you want. This is where you get to dial in "sunset gradients", neon stripes, or whatever strange galaxy background your project is asking for.

.linear-complex {
    background: linear-gradient(75deg, darkred 20%, 
        crimson, darkorange 60%, gold, bisque)
}

Radial Gradient

If you want a gradient that feels more like a spotlight or a soft bubble, reach for radial-gradient(). Instead of drawing along a straight line, it spreads out from a center point.

The general pattern looks like radial-gradient(size shape at position, colors...). If you skip the extra bits, the browser gives you a circle in the middle. You can then tweak things like closest-corner or closest-side to control how far the gradient is allowed to grow.

.radial-base {
    background: radial-gradient(blue, DeepPink)
}
.radial-percent {
    background: radial-gradient(blue 30%, DeepPink 60%)
}
.radial-corner {
    background: radial-gradient(closest-corner, blue, DeepPink)
}
.radial-side {
    background: radial-gradient(closest-side, blue, DeepPink)
}

Conic Gradient

conic-gradient() is the weird one, in the best way. Colors spin around a center point, so the gradient changes as you move around in a circle instead of across a line.

The structure is conic-gradient(from angle at position, colors...). The from value says where to start (defaults to 0deg), and at x y lets you slide the center around the box. Paired with angle ranges for each color, this is perfect for dashboard charts, loading spinners, or wild color wheels.

.conic-base {
    background: conic-gradient(blue, DeepPink)
}
.conic-percent {
    background: conic-gradient(blue 30%, DeepPink 60%)
}
.conic-corner {
    background: conic-gradient(from 10deg at 20% 30%, blue, DeepPink)
}
.conic-side {
    background: conic-gradient(from 60deg at 70% 70%, blue, DeepPink)
}

You can also supply exact angle ranges for each color and get a very clean pie-chart effect, all in pure CSS.

.conic-complex {
    background: conic-gradient(
    gold 20deg, lightcoral 20deg 190deg, mediumturquoise 190deg 220deg,
    plum 220deg 320deg, steelblue 320deg);
}

Gradient Playground & Real Uses

Once you understand the knobs—direction, shape, position, and color stops—you can start sneaking gradients into real UI without everything turning into a rave poster.

Below are a few patterns you can lift straight into an app: gradient-filled text, animated rainbow headers, button borders that feel a little extra, and a soft glowing card.