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 may seem quite simple, but there is 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, color transitions are defined by color stops. These are points that indicate where each color begins and ends. The colors are mixed mathematically, which is called 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 quite simple because they blend colors together along a straight line.

By default the gradient is from top Unpleasant bottombut you can control the direction, color stops and even repetition.

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

Direction and angle

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

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

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

Color stops

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

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

Placing two color stops in the same position creates sharp edges.

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

Repetitive

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

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

Diamond gradient

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

This effect is achieved by superimposing four linear gradients, each placed at an angle 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. They are great for glows, backgrounds or depth lighting.

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

Form

With radial gradients you can define two shapes: a circle or a ellipse. The difference is that circle always keeps one 1:1 aspect ratio, while the ellipse extends with the container.

If you don’t define the shape, the gradient is automatically set to default ellipse.

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

Keyword size

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 the center point before reaching the final color stop. If you don’t define the keyword ‘size’, the gradient will default to ‘size’ farthest-corner.

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

Position

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

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

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

Conical gradient

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

They are ideal for graphs, rings, animated borders or more complex visual effects.

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

Starting corner

As with the other gradient types, you can adjust the starting angle. With conical gradients, the color stops are placed along corners and defined in degrees.

If you don’t define it, it will be set by default 0deg. The gradient also automatically loops back to the first color stop.

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

Middle position

You can move the center of rotation with a at value.

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

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

Hard edges

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
  );
}

Repetitive

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

You can do the deg values ​​and the number of repeats and gradients to create unique effects.

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

Gradients and color spaces

In all of the examples above, the sRGB color space, the standard on the Internet. 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 is set to oklab for ramps in Tailwind 4.

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

As mentioned earlier, color gradients are just mathematical mixtures of colors. The way these colors fit together 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 to colour. oklab also interpolates colors in a straight line, but you can use this one Display P-3 to colour.

oklch does not interpolate in a straight line, but instead in a circle, because in oklch shade is angular and you can also make use of it Display P-3 to colour.

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

This can be a double-edged sword. While some color gradients may look smoother, you may also see colors that you’ve never defined.

Color tips

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

Define color stops where a color begins and endswhile hints only control where the color blend appears in the gradient.

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

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

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

When you add a focal point, red comes into its own 50%green starts and ends with 50% and it acts as a stop, then interpolates from green to blue.

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

Color hints don’t define new colors, they determine where the transition between two colors appears between stops. They change the interpolation speed, not the endpoints.

The marker indicates where the center point appears. With a hint of 30%, red fades faster and blue takes up more space. At 70%, red dominates for longer before switching to blue.

You can also use multiple hints in one gradient to have full control over where the color interpolation takes place.

Gradient layering

You can also overlay multiple gradients. This allows you to create very unique effects. This in combination with background-blend-modeunlocks the real magic of gradient layers.

Combining multiple blending modes 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 combined with animations are very powerful and there are many creative ways to take advantage of them.

Gradients like masks

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

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

Performance

Gradients are GPU accelerated in modern browsers. This means that properties such as position, angle or size can be animated very efficiently, as long as the gradient itself is not recomputed.

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 little more expensive.

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

For example, in my login dialog component, the passkey state animation was performed by an animation of a conic gradient.

Conclusion

Gradients are extremely powerful and there are almost endless possibilities 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 used in unique ways, feel free to email me at jakub@kbo.sk, I’d love to take a look!

More

If you have any questions, you can reach me at jakub@kbo.sk, see more of my work at Tweet or subscribe to my newsletter.