[Scrim Gradient Mixin] - Smooth fading box-shadow #scrim #box-shadow #scss #sass

_scrim-gradient.scss

// background: linear-gradient(
// hsl(359, 100%, 100%) 0%,
// hsla(359, 100%, 100%, 0.738) 19%,
// hsla(359, 100%, 100%, 0.541) 34%,
// hsla(359, 100%, 100%, 0.382) 47%,
// hsla(359, 100%, 100%, 0.278) 56.5%,
// hsla(359, 100%, 100%, 0.194) 65%,
// hsla(359, 100%, 100%, 0.126) 73%,
// hsla(359, 100%, 100%, 0.075) 80.2%,
// hsla(359, 100%, 100%, 0.042) 86.1%,
// hsla(359, 100%, 100%, 0.021) 91%,
// hsla(359, 100%, 100%, 0.008) 95.2%,
// hsla(359, 100%, 100%, 0.002) 98.2%,
// hsla(359, 100%, 100%, 0) 100%
// );

/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/

@mixin scrimGradient($startColor: $color-black, $direction: 'to bottom') {

  $scrimCoordinates: (
    0: 1,
    19: 0.738,
    34: 0.541,
    47: 0.382,
    56.5: 0.278,
    65: 0.194,
    73: 0.126,
    80.2: 0.075,
    86.1: 0.042,
    91: 0.021,
    95.2: 0.008,
    98.2: 0.002,
    100: 0
  );

  $hue: hue($startColor);
  $saturation: saturation($startColor);
  $lightness: lightness($startColor);
  $stops: ();

  @each $colorStop, $alphaValue in $scrimCoordinates {
    $stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage($colorStop/100);
    $stops: append($stops, $stop, comma);
  }

  background: linear-gradient(unquote($direction), $stops);
}


// TO USE
@include scrimGradient(#fff);