node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

postcss-easing-gradients

PostCSS Easing Gradients

Build Status NPM Version NPM Monthly Downloads

PostCSS plugin to create smooth linear-gradients that approximate easing functions.

.demo {
  background: scrim-gradient(
    black,
    transparent
  );
 
  background: ease-in-out-quad-gradient(
    to bottom left,
    #bada55,
    olive
  );
 
  background: ease-in-sine-gradient(
    23deg,
    hsla(30080%50%0.7),
    rgb(120, 140, 255)
  );
}

becomes

.demo {
  background: linear-gradient(
    hsl(00%0%) 0%,
    hsla(00%0%0.738) 19%,
    hsla(00%0%0.541) 34%,
    hsla(00%0%0.382) 47%,
    hsla(00%0%0.278) 56.5%,
    hsla(00%0%0.194) 65%,
    hsla(00%0%0.126) 73%,
    hsla(00%0%0.075) 80.2%,
    hsla(00%0%0.042) 86.1%,
    hsla(00%0%0.021) 91%,
    hsla(00%0%0.008) 95.2%,
    hsla(00%0%0.002) 98.2%,
    hsla(00%0%0) 100%
  );
 
  background: linear-gradient(
    to bottom left,
    hsl(74.464.3%59.4%) 0%,
    hsl(74.263.2%58.8%) 9.7%,
    hsl(73.560.7%57.1%) 18.3%,
    hsl(72.657.5%54.9%) 25.7%,
    hsl(71.554.2%52.3%) 32.2%,
    hsl(70.452.1%49.6%) 37.9%,
    hsl(69.255.1%46.7%) 43.1%,
    hsl(67.958.7%43.7%) 47.9%,
    hsl(66.762.8%40.6%) 52.4%,
    hsl(65.467.6%37.7%) 57.2%,
    hsl(64.272.9%34.8%) 62.4%,
    hsl(6379%32%) 68.2%,
    hsl(61.985.5%29.5%) 74.7%,
    hsl(60.992.3%27.3%) 82.2%,
    hsl(60.297.8%25.7%) 90.9%,
    hsl(60100%25.1%) 100%
  );
 
 
  background: linear-gradient(
    23deg,
    hsla(30080%50%0.7) 0%,
    hsla(299.180.2%50.6%0.703) 9.7%,
    hsla(296.880.7%52.1%0.713) 18.9%,
    hsla(293.381.6%54.3%0.727) 27.4%,
    hsla(289.182.6%56.7%0.745) 35.2%,
    hsla(284.383.7%59.2%0.764) 42.5%,
    hsla(279.285%61.7%0.786) 49.3%,
    hsla(27486.4%64%0.808) 55.7%,
    hsla(268.587.8%66.2%0.831) 61.8%,
    hsla(26389.4%68.2%0.854) 67.7%,
    hsla(257.491%70.1%0.878) 73.4%,
    hsla(251.892.7%71.8%0.902) 78.9%,
    hsla(246.294.4%73.4%0.927) 84.3%,
    hsla(240.696.2%74.9%0.951) 89.6%,
    hsla(235.498.3%74.3%0.976) 94.9%,
    hsl(231.1100%73.5%) 100%
  );
}

Usage

postcss([ require('postcss-easing-gradients') ])

See PostCSS docs for examples for your environment.

Syntax

The syntax is <gradient-type>([ <direction>,]? <start-color>, <stop-color>) where

  • gradient-type is one of the supported gradient types
  • direction shares syntax with linear-gradient and is optional
  • start-color and stop-color are css colors in any format

Note that it's exactly two colors and it doesn't support custom color stop locations.

Supported Gradient Types

ease-in-sine-gradient
ease-out-sine-gradient
ease-in-out-sine-gradient
ease-in-quad-gradient
ease-out-quad-gradient
ease-in-out-quad-gradient
scrim-gradient

Scrim is a custom easing inspired by Material Design text protection scrims

Options

  • precision: 0.1 is the default value and creates ~17 color stops. I wouldn't recommending using anything above 0.2 as banding becomes very obvious.
  • alphaDecimals: 3 is the default number of decimals for alpha values and I wouldn't recommend changing it. Increase it for greater precision.

Demo

You can try it out by running npm install and gulp in the demo folder.

Contributions

Are more than welcome. Code is linted using:

js-standard-style