Easing Gradients

Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.

It's currently a CSSWG proposal but you can use the editor below and/or postCSS-easing-gradients. I'm creating a Sketch plugin too.

Examples

Gradients under text/ui are used to increase contrast but should often be as invisible as possible. The examples below have the same amount of blackness behind the text.

Linear
plant
Easing
plant

When transitioning between colors the edges become prominent if we don't ease-in-out of it. The image fade-out on my frontpage uses this technique too.

Linear
Easing

I believe that there are many designs out there that could benefit from this approach, including the Spotify player shown below (click to see the big picture).

spotify with linear gradientspotify with easing gradient

Editor

Create and preview your own easing gradients in CSS. Note that the CSSWG syntax isn't supported in any browsers yet.

Easing function
Color space

Easing linear gradient

Plain gradient

CSS

linear-gradient(to bottom, hsl(330, 100%, 45.1%) 0%, hsl(331.02, 87.14%, 47.75%) 9.7%, hsl(329.95, 76.2%, 49.42%) 18.3%, hsl(327.15, 67.68%, 50.23%) 25.5%, hsl(322.72, 59.92%, 50.42%) 31.8%, hsl(316.38, 51.58%, 50.13%) 37.5%, hsl(307.33, 43.95%, 49.44%) 42.8%, hsl(294.59, 39.14%, 50.16%) 47.8%, hsl(280.91, 42.83%, 53.36%) 52.8%, hsl(267.35, 46.89%, 56.37%) 57.9%, hsl(253.9, 51.25%, 59.15%) 63.2%, hsl(240.28, 55.87%, 61.7%) 68.9%, hsl(228.69, 65.5%, 58.92%) 75.3%, hsl(220.42, 73.51%, 55.16%) 82.7%, hsl(214.2, 79.29%, 50.28%) 91.4%, hsl(210, 100%, 45.1%) 100%);

CSSWG Proposal

linear-gradient(
  to bottom,
  hsla(330, 100%, 45%, 1),
  ease-in-out,
  hsla(210, 100%, 45%, 1)
);

Thank you

Help me by tweeting about it, star/contribute on GitHub or donate to my fundraiser for Ethiopia Health Aid Inc.

Explained

I wrote about it in detail on CSS-Tricks and would love to do a conference talk 😉 or two about it.

Fortunately Chris Coyier and others liked the idea and Eric Meyer made a CSSWG proposal where the syntax was refined and you can chime in with your ideas/suggestions.

Until that happens 🤞 you can use the postCSS-easing-gradients plugin which is more powerful than the editor above.

What the plugin and the editor do is add a bunch of intermediate color-stops to create a "low poly" version of the easing function. The end result is ok for now and a lot prettier in relevant use cases.

Resources

Sorry, this is my playground where I test out new techniques so I don't support IE/Edge browsers right now. Try using Chrome or Firefox.