Ease Out Sine Gradient

easeOutSine-gradient.scss

@function easeOutSine-gradient($color: #000) {
  $easeOutSine-gradient: (
    // alpha: stop
    1: 0%,
    0.917: 5.3%,
    0.834: 10.6%,
    0.753: 15.9%,
    0.672: 21.3%,
    0.591: 26.8%,
    0.511: 32.5%,
    0.433: 38.4%,
    0.357: 44.5%,
    0.283: 50.9%,
    0.213: 57.7%,
    0.147: 65%,
    0.089: 72.9%,
    0.042: 81.4%,
    0.011: 90.6%,
    0: 100%
  );
  @if type-of($color) != color {
    @return null;
  }
  $rgba: "#{red($color)},#{green($color)},#{blue($color)}";
  $color-stops: ();
  @each $alpha, $stop in $easeOutSine-gradient {
    $color-stops: append($color-stops, unquote("rgba(#{$rgba}, #{$alpha}) #{$stop}"), "comma");
  }
  @return $color-stops;
}

.box {
  background-image: linear-gradient(to top, easeOutSine-gradient(#000));
}