flâneur

Easing Gradients

larsenwork.com · 498 words · saved by 3 readers

Supercharge your gradients with non-linear color mix and custom color spaces.

Easing Gradients 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 and you can use the Editor PostCSS plugin Sketch plugin 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 Easing 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

saved by

related reading