Wondering what’s next for npm?Check out our public roadmap! »

    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

    3,596

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar