Breakdown

Easing Gradients is a concept that addresses hard edges often found in linear gradients by utilizing easing functions to control color transitions smoothly. It's currently being proposed by the CSS Working Group (CSSWG) and garnered attention for its potential to enhance design aesthetics. Notably, tools such as the PostCSS plugin and Sketch plugin have been developed to implement this technique effectively.

Key points

  • Easing functions can be employed to create smoother color transitions in linear gradients.

  • The use of easing gradients can enhance contrast in design elements such as text and UI.

  • Useful for subtle gradients behind text/UI to increase contrast

  • CSSWG proposal to add easing gradients to CSS specification

  • The PostCSS plugin approximates easing by adding multiple color stops