Understanding Gradients

A deep dive into how gradients work, how color models affect them and why some gradients look better than others.

What Is a Gradient?

We use gradients every day and they might seem fairly straight-forward but there's a surprising amount of complexity and some very interesting things you can do with them.

A gradient is a smooth transition between two or more colors. In CSS gradients are defined by color stops. These are points that mark where each color starts and ends. The colors are mathematically blended which is referred to as interpolation.

Gradient Types

There are three primary gradient types, linear, radial and conic.

Linear Gradients

The most common type of gradient is linear. They are pretty straight-forward as they blend colors along a straight line.

By default, the gradient goes from top to bottom, but you can control the direction, color stops and even repetition.

element {
  background: linear-gradient(to bottom, red, blue);
}

You can define the direction of the gradient either by using a keyword or a degree value and the angles rotate clockwise.

The keywords include top, left, right and bottom. You can also combine these and do something like to bottom right.

element {
  background: linear-gradient(45deg, red, blue);
}

You can define individual color steps that let you control exactly where colors start and stop.

element {
  background: linear-gradient(to bottom, red 25%, blue 75%);
}

If you place two color stops at the same position, it will create sharp edges.

element {
  background: linear-gradient(to bottom, red 50%, blue 50%);
}

You can also use the repeating type to have the gradient repeat. This is particularly useful if you want to create a pattern or a texture.

element {
  background: repeating-linear-gradient(45deg, red 0 10px, blue 24px 20px);
}

Some design tools like Figma also include a diamond gradient, which radiates outward in a square shape.

This effect is done by layering four linear gradients, each positioned at a corner and sized to cover a quarter of the element. Diamond is not a gradient type in CSS.

element {
  background:
    linear-gradient(to bottom right, #fff 0%, #999 50%) bottom right / 50% 50%
      no-repeat,
    linear-gradient(to bottom left, #fff 0%, #999 50%) bottom left / 50% 50%
      no-repeat,
    linear-gradient(to top left, #fff 0%, #999 50%) top left / 50% 50% no-repeat,
    linear-gradient(to top right, #fff 0%, #999 50%) top right / 50% 50%
      no-repeat;
}

Radial Gradient

Radial gradients radiate outward from a center point. They are great for glows, backgrounds or depth lighting.

element {
  background: radial-gradient(red, blue);
}

In radial gradients you can define two shapes, a circle or an ellipse. The difference is that circle always maintains a 1:1 aspect ratio, while ellipse stretches with the container.

If you don't define the shape, the gradient will automatically default to ellipse.

element {
  background: radial-gradient(circle, red, blue);
}

You can also control how far the gradient extends. The available values here are closest-side, closest-corner, farthest-side and farthest-corner.

This determines how far it extends from its center point before it reaches the final color stop. If you don't define the size keyword, the gradient will default to farthest-corner.

element {
  background: radial-gradient(circle closest-side, red, blue);
}

Another thing that you have control over in radial gradients is the position. You can move the center of the gradient to a different position.

The default value is center, but it accepts keywords, percentages or coordinates.

element {
  background: radial-gradient(circle at 70% 30%, red, blue);
}

Conic Gradient

Conic gradients are the newest type of gradients in CSS. They rotate around a central point, similar to slices of a color wheel.

They are great for charts, rings, animated borders or more complex visual effects.

element {
  background: conic-gradient(red, blue);
}

Similar to the other gradient types, you can customize the starting angle. In conic gradients the color stops are placed along angles and they are defined in degrees.

If you don't define it, it defaults to 0deg. The gradient also automatically wraps back to the first color stop.

element {
  background: conic-gradient(from 90deg, red, blue);
}

You can move the rotation center with an at value.

Without defining the value, it defaults to at 50% 50%.

element {
  background: conic-gradient(at 70% 30%, red, blue);
}

Similar to linear gradients, you can also make the gradient look like it has sharp edges.

element {
  background: conic-gradient(
    red 0deg 120deg,
    yellow 120deg 240deg,
    green 240deg 360deg
  );
}

Similar to linear gradients, you can repeat conic gradients to create repetitive shapes.

You can tweak the deg values and the amount of repetitions and gradients to create unique effects.

element {
  background: repeating-conic-gradient(
    from 0deg,
    #000 0deg 20deg,
    #fff 20deg 40deg
  );
}

Gradients and Color Spaces

All of the examples above have used the sRGB color space, which is the default on the web. However, gradient interpolation behaves differently depending on the color space used.

If you want to learn more about color spaces read my article about OKLCH colors.

You can use newer color models for gradients by adding the color space directly in the gradient definition.

element {
  background: linear-gradient(in oklch, red, blue);
}

You can also do this in Tailwind by forcing the color space. Tailwind defaults to oklab for gradients in Tailwind 4.

<div class="bg-linear-to-r/oklch from-red-500 to-blue-500" />

As mentioned earlier, gradients are just mathematical blends of colors. The way these colors blend depends on two things, the type of gradient and the color space used.

To explain this simply, rgb interpolates colors in a straight line but only allows you to use sRGB colors. oklab also interpolates colors in a straight line but it allows you to use Display P-3 colors.

oklch doesn't interpolate in a straight line, but instead in a circle, because in oklch hue is angular and it also allows you to use Display P-3 colors.

In the example above, you can see that the oklch gradients look different compared to rgb and oklab. This is due to the difference in interpolation.

This can be a double edged sword. While some gradients might look smoother, you might also see colors that you've never defined.

Color Hints

Modern CSS also supports color hints, which let you control where the midpoint between colors appears. This is different from setting stop positions.

Color stops define where a color starts and ends, while hints only define where the color blend appears on the gradient.

element {
  background: linear-gradient(to right, red 0%, blue 100%);
}

For example, in this gradient red is locked at 0% and blue is locked at 100%. The browser linearly interpolates between these two positions.

element {
  background: linear-gradient(to right, red 0%, green 50%, blue 100%);
}

If you add a midpoint, red lives up to 50%, green starts and ends at 50% and it acts as a stop, and then it interpolates from green to blue.

element {
  background: linear-gradient(to right, red, 40%, blue);
}

Color hints don't define new colors, they control where the transition between two colors appears between stops. They change the rate of interpolation, not the endpoints.

The marker shows where the midpoint appears. With a 30% hint, red transitions faster and blue takes up more space. With 70%, red dominates longer before transitioning to blue.

You can also use multiple hints in a single gradient to have full control over where the color interpolation happens.

Gradient Layering

You can also layer multiple gradients on top of one another. This allows you to create very unique effects. This, in combination with background-blend-mode, unlocks the real magic of gradient layering.

Combining multiple blend modes together can create even more interesting effects.

.layered-gradient {
  background:
    linear-gradient(
      in oklch 135deg,
      oklch(0.75 0.18 280),
      oklch(0.8 0.15 80),
      oklch(0.75 0.18 320)
    ),
    conic-gradient(
      in oklch from 180deg,
      oklch(0.7 0.12 200 / 0.3),
      oklch(0.7 0.12 340 / 0.3),
      oklch(0.7 0.12 200 / 0.3)
    );
  background-blend-mode: overlay, color-dodge;
}

Gradients in combination with animations are very powerful and there are many creative ways to take advantage of them.

Gradients as Masks

Gradients can also be used as masks, where their lightness or transparency controls which parts of an element are visible.

You can combine this with animation or scroll effects for dynamic reveals, glowing shapes or text fade-outs.

Performance

Gradients are GPU accelerated in modern browsers. This means properties like position, angle, or size can be animated very efficiently as long as the gradient itself isn't being recalculated.

background-position, background-size, background-angle or opacity are very cheap to animate. Animating color stops, adding or removing gradient layers or switching between different gradient types is a bit more expensive.

If you want to animate gradients, it's often better to either animate a pseudo element overlay that moves or to use CSS variables for colors that transition them indirectly.

For example, in my sign-in dialog component, the passkey state animation was done animating a conic gradient.

Conclusion

Gradients are extremely powerful and there are almost endless posibilities when it comes to creating unique effects with them. Before writing this article, I had no idea about some of the things mentioned.

If you have any cool examples of gradients being used in a unique way, feel free to shoot me an email at jakub@kbo.sk, I'd love to take a look!

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.