PostCSS plugin to create smooth linear-gradients that approximate easing functions. Visual examples and online editor on larsenwork.com/easing-gradients
The syntax has changed substantially in
^v.2.0.0
.cubic-bezier {
background: linear-gradient(
to bottom,
black,
cubic-bezier(0.48, 0.30, 0.64, 1.00),
transparent
);
/* => */
background: linear-gradient(
to bottom,
hsl(0, 0%, 0%),
hsla(0, 0%, 0%, 0.94505) 7.9%,
hsla(0, 0%, 0%, 0.88294) 15.3%,
hsla(0, 0%, 0%, 0.81522) 22.2%,
hsla(0, 0%, 0%, 0.7426) 28.7%,
hsla(0, 0%, 0%, 0.66692) 34.8%,
hsla(0, 0%, 0%, 0.58891) 40.6%,
hsla(0, 0%, 0%, 0.50925) 46.2%,
hsla(0, 0%, 0%, 0.42866) 51.7%,
hsla(0, 0%, 0%, 0.34817) 57.2%,
hsla(0, 0%, 0%, 0.2693) 62.8%,
hsla(0, 0%, 0%, 0.19309) 68.7%,
hsla(0, 0%, 0%, 0.12126) 75.2%,
hsla(0, 0%, 0%, 0.05882) 82.6%,
hsla(0, 0%, 0%, 0.01457) 91.2%,
hsla(0, 0%, 0%, 0)
);
}
.ease {
background: linear-gradient(
green,
ease,
red
);
/* => */
background: linear-gradient(
hsl(120, 100%, 25.1%),
hsl(111.85, 100%, 23.5%) 7.8%,
hsl(98.92, 100%, 21.34%) 13.2%,
hsl(82.02, 100%, 19.05%) 17.6%,
hsl(60.02, 100%, 16.71%) 21.7%,
hsl(40.57, 100%, 21.3%) 25.8%,
hsl(28.11, 100%, 25.86%) 30.2%,
hsl(19.54, 100%, 30.32%) 35.1%,
hsl(13.47, 100%, 34.55%) 40.6%,
hsl(9.01, 100%, 38.49%) 46.9%,
hsl(5.73, 100%, 42.01%) 54.1%,
hsl(3.36, 100%, 44.98%) 62.2%,
hsl(1.74, 100%, 47.28%) 71.1%,
hsl(0.7, 100%, 48.86%) 80.6%,
hsl(0.15, 100%, 49.74%) 90.5%,
hsl(0, 100%, 50%)
);
}
.steps {
background: linear-gradient(
to right,
green,
steps(4, skip-none),
red
);
/* => */
background: linear-gradient(
to right,
hsl(120, 100%, 25.1%),
hsl(120, 100%, 25.1%) 25%,
hsl(60.23, 100%, 16.73%) 25%,
hsl(60.23, 100%, 16.73%) 50%,
hsl(15.06, 100%, 33.33%) 50%,
hsl(15.06, 100%, 33.33%) 75%,
hsl(0, 100%, 50%) 75%,
hsl(0, 100%, 50%)
);
}Currently a subset of the full syntax is supported:
linear-gradient(
[ <direction>,]?
<color>,
<animation-timing-function>,
<color>
)The steps syntax is also being figured out and currently this is supported.
postcss([ require('postcss-easing-gradients') ])See PostCSS Usage docs for examples for your environment.
is the default and creates ~17 color stops. A higher number creates a more "low poly" gradient and banding becomes very visible when using anything above 0.2.
is the default. A lower number can result in banding.
is the default color space used for interpolation and is closest to what most browsers use. Other options are 'rgb', 'hsl', 'lab' and 'lch' as per chromajs documentation