npm

Need private packages and team management tools?Check out npm Orgs. »

postcss-easing-gradients

3.0.1 • Public • Published

PostCSS Easing Gradients

NPM Version NPM Monthly Downloads Build Status Dependency status
MIT License Code Style: Prettier Follow Larsenwork on Twitter

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

Code Examples

.cubic-bezier {
  background: linear-gradient(to bottomblackcubic-bezier(0.480.30.641)transparent);
  /* => */
  background: linear-gradient(
    to bottom,
    hsl(00%0%),
    hsla(00%0%0.94505) 7.9%,
    hsla(00%0%0.88294) 15.3%,
    hsla(00%0%0.81522) 22.2%,
    hsla(00%0%0.7426) 28.7%,
    hsla(00%0%0.66692) 34.8%,
    hsla(00%0%0.58891) 40.6%,
    hsla(00%0%0.50925) 46.2%,
    hsla(00%0%0.42866) 51.7%,
    hsla(00%0%0.34817) 57.2%,
    hsla(00%0%0.2693) 62.8%,
    hsla(00%0%0.19309) 68.7%,
    hsla(00%0%0.12126) 75.2%,
    hsla(00%0%0.05882) 82.6%,
    hsla(00%0%0.01457) 91.2%,
    hsla(00%0%0)
  );
}
 
.ease {
  background: linear-gradient(greeneasered);
  /* => */
  background: linear-gradient(
    hsl(120100%25.1%),
    hsl(88.79100%24.28%) 7.8%,
    hsl(69.81100%23.14%) 13.2%,
    hsl(53.43100%24.55%) 17.6%,
    hsl(42.52100%28.9%) 21.7%,
    hsl(34.96100%32.64%) 25.8%,
    hsl(29.1100%35.96%) 30.2%,
    hsl(24.26100%38.94%) 35.1%,
    hsl(20.14100%41.56%) 40.6%,
    hsl(16.47100%43.87%) 46.9%,
    hsl(13.13100%45.83%) 54.1%,
    hsl(10.07100%47.42%) 62.2%,
    hsl(7.23100%48.62%) 71.1%,
    hsl(4.6100%49.43%) 80.6%,
    hsl(2.16100%49.87%) 90.5%,
    hsl(0100%50%)
  );
}
 
.steps {
  background: linear-gradient(to rightgreensteps(4, skip-none)red);
  /* => */
  background: linear-gradient(
    to right,
    hsl(120100%25.1%),
    hsl(120100%25.1%) 25%,
    hsl(42.59100%28.87%) 25%,
    hsl(42.59100%28.87%) 50%,
    hsl(21.3100%40.82%) 50%,
    hsl(21.3100%40.82%) 75%,
    hsl(0100%50%) 75%,
    hsl(0100%50%)
  );
}
 
.radial {
  background: radial-gradient(circle at top rightredease-in-outblue);
  /* => */
  background: radial-gradient(
    circle at top right,
    hsl(0100%50%),
    hsl(353.5100%49.71%) 7.7%,
    hsl(347.13100%48.89%) 14.8%,
    hsl(341.1100%47.69%) 21%,
    hsl(335.24100%46.22%) 26.5%,
    hsl(329.48100%44.57%) 31.4%,
    hsl(323.63100%42.76%) 35.9%,
    hsl(317.56100%40.82%) 40.1%,
    hsl(310.92100%38.7%) 44.2%,
    hsl(303.81100%36.49%) 48.1%,
    hsl(296100%36.55%) 52%,
    hsl(288.73100%38.81%) 56%,
    hsl(282.14100%40.92%) 60.1%,
    hsl(276.09100%42.84%) 64.3%,
    hsl(270.27100%44.64%) 68.8%,
    hsl(264.54100%46.28%) 73.7%,
    hsl(258.7100%47.74%) 79.2%,
    hsl(252.68100%48.92%) 85.4%,
    hsl(246.32100%49.72%) 92.5%,
    hsl(240100%50%)
  );
}

Syntax

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.


Usage

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

See PostCSS Usage docs for examples for your environment.


Options

colorStops: 15

is the default. A lower number creates a more "low poly" gradient with less code but a higher risk of banding.

alphaDecimals: 5

is the default. A lower number can result in banding.

colorMode: 'lrgb'

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

install

npm i postcss-easing-gradients

Downloadsweekly downloads

2,314

version

3.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability