The linear-gradient function in CSS interpolates colours linearly between provided stops along a line. This linear-ness can produce gradients that look uneven or harsh, especially between few stops, colours with different luminance or saturation levels, or when working with transparency. Assuming a constant rate of change between colours doesn't always align with how we perceive colour differences. The human eye is more sensitive to changes in certain colour ranges, which can make a purely linear transition look unnatural. This also applies to the colour values chosen in-between stops when mixing in the RGB colour space, as I'll detail later.

Easing functions can be applied to colour transitions to create more natural and visually-pleasing gradients. These functions adjust the rate of change, making the transition smoother and more gradual. By easing between multiple colour stops within linear-gradient, the gradient progression can be made to more closely mimic natural colour blending, resulting in a more harmonious look.

Here's a visual example – the same two colours over a white background, interpolated linearly and with an easing function applied:

The first bar uses linear interpolation, and doesn't appear visually-balanced. The colours bleed into each other nearly right away. Using an 'ease-in-out' function, the second appears much more even and visually-pleasing as a transition between two colours.

The unpleasing dirty-looking mix in the middle is another issue, to do with how colours are blended in the RGB colour space in CSS. However, it's visible how the start and end are much more vibrant, clearly closer to the original colours, and mixing begins closer to the centre.

Implementing eased linear gradients in vanilla CSS involves manually calculating the eased positions for each color stop. The above two examples are written as:

While certainly possible to do, it's a tedious and error-prone process - not really feasable for large projects and painful to update in the future.

Thankfully, it's fairly straightforward to leverage SCSS functions for automating the creation of such eased gradients.

First, we define an easing function to determine the rate of change for each colour stop. A basic 'ease' function looks like:

An 'ease-in-out' function is also fairly simple and is what I settled on using as it provides the best-looking results:

Next, a function that generates the linear-gradient rule using the easing function:

This function wraps our easing function, positioning each stop and mixing the colours appropriately. For simplicity, it only handles a start-colour and end-colour, although it wouldn't be too hard to take in a list of colours / positions, just as CSS's linear-gradient does.

As mentioned prior, when creating gradients between two complimentary colours, such as purple and green, you might encounter dirty or muddy colors in the middle due to the way colors are interpolated in the RGB colour space. This is because the RGB colour space does not account for human perception of colour differences. To achieve smoother and more visually appealing gradients, we can use the LAB colour space, which is designed to be more perceptually uniform.

The LAB colour space (CIELAB) is a color space that describes colours more simillarly to how humans perceive them. It consists of three components:

• L: Lightness (0 to 100)
• A: Green to red (-128 to 127)
• B: Blue to yellow (-128 to 127)

Unlike the RGB colour space, which is device-dependent and based on mixing red, green, and blue light, the LAB colour space is designed to be perceptually uniform. This means that a given numerical change in LAB values corresponds to a similar perceived change in colour. This makes it ideal for tasks like colour interpolation, where the goal is to create smooth and natural transitions.

Here's some visual examples of mixing between values in RGB vs in LAB. Which do you think look more pleasing? 🙃

To interpolate colours in the LAB color space, we first need to convert RGB colours to LAB, perform the interpolation, and then convert the LAB colours back to RGB for insertion into the linear-gradient string.

Below are functions for these conversions - RGB to LAB and vice versa:

Second, a helper for calculating the blending at any given position:

Now, we can replace SCSS's mix with our new interpolate-lab function:

It's important to note that this exact colour mixing implementation won't work with transparency. With some more tweaking, it could, but I didn't go that far since I just wanted interpolation between solid colours. One way might be to calculate the alpha channel's positioning seperately, then recombine it with rgba after rgb_to_lab and vice versa.

And here's the end result, mixed in the LAB space and eased in/out, versus the stock mix and interpolation you'd get from linear-gradient.

If you want to have some more fun, try using other easing functions rather than the simple 'ease' or 'ease-in-out' demo'd here – it's fairly simple to achieve some cool effects!

That's all, though – I hope this info is useful to you in some form! Even ignoring the more-complex LAB space colour mixing, I've found even just using some easing can make a big difference in how gradients look, especially when used as overlays, backgrounds, or in places transparency is needed. Please feel free to reach out if you have any questions about the stuff covered in this post. Happy CSS-ing 🖌️