Nondeterministic Polynomial Munchies
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

postcss-scrim-gradient

0.1.2 • Public • Published

Postcss scrim gradient plugins

This PostCSS plugin lets you add very simple scrim style gradients. It is base on the awesome and more powerful postcss-easing-gradients plugin by Andreas Larsen. If you don't need the color and easing control that Andreas plugin offers then this is the plugin to use.

Usage


background: scrim(<direction>, <distance>, <opacity>);

  • @direction can take any linear-gradient direction property e.g. to left, 32deg, 1.5rads, 0.25turns ...
  • @distance can take any css length property e.g. 100px, 60%, 6em, ...
  • @opacity sets the starting opacity of the scrim. (the scrim will always end with a transparent color-stop)

/* input.css */
background-image: scrim(to bottom, 100px, 1);
 
/* output.css */
background-image:
    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0.95) 7.5px,
        rgba(0, 0, 0, 0.89) 14.6px,
        rgba(0, 0, 0, 0.84) 20.8px,
        rgba(0, 0, 0, 0.79) 26.3px,
        rgba(0, 0, 0, 0.74) 31.2px,
        rgba(0, 0, 0, 0.68) 35.7px,
        rgba(0, 0, 0, 0.63) 39.9px,
        rgba(0, 0, 0, 0.58) 44px,
        rgba(0, 0, 0, 0.53) 48px,
        rgba(0, 0, 0, 0.47) 51.9px,
        rgba(0, 0, 0, 0.42) 55.8px,
        rgba(0, 0, 0, 0.37) 59.9px,
        rgba(0, 0, 0, 0.32) 64.1px,
        rgba(0, 0, 0, 0.26) 68.6px,
        rgba(0, 0, 0, 0.21) 73.5px,
        rgba(0, 0, 0, 0.16) 79px,
        rgba(0, 0, 0, 0.11) 85.2px,
        rgba(0, 0, 0, 0.05) 92.3px,
        rgba(0, 0, 0, 0)
    );

Keywords

Install

npm i postcss-scrim-gradient

DownloadsWeekly Downloads

18

Version

0.1.2

License

MIT

Unpacked Size

9.31 kB

Total Files

5

Last publish

Collaborators

  • avatar