# Better Easing Gradients (SCRIM Gradient)

**URL:** <https://community.sitejet.io/t/better-easing-gradients-scrim-gradient/81>\
**Category:** Share Code and Components\
**Tags:** cms\_code\
**Created:** [May 7, 2021, 12:33pm UTC](https://community.sitejet.io/t/better-easing-gradients-scrim-gradient/81 "2021-05-07T12:33:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![zachary](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/zachary/32/26_2.png) [@zachary](https://community.sitejet.io/u/zachary)\
**Post date:** [May 7, 2021, 12:33pm UTC](https://community.sitejet.io/t/better-easing-gradients-scrim-gradient/81/1 "2021-05-07T12:33:58Z")

</div>

Hey everyone!

I have been using this simple SCSS from [Matthew Beta](https://gist.github.com/matthewbeta) for creating automatic color stops in a gradient to **eliminate the gray, washed-out middle values** that 2 color-stop gradients make.

**Article on the Problem** : [Easing Linear Gradients | CSS-Tricks](https://css-tricks.com/easing-linear-gradients/)

**GitHub Gist** : [A simple little SCSS mixin for creating scrim gradients · GitHub](https://gist.github.com/matthewbeta/0ef11bd907b435f101e09cc6216ad66b)

**Code Itself** :

```
/*
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);

}

```

I hope you find this useful! Give it a start on Github if you do!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [December 24, 2024, 11:31am UTC](https://community.sitejet.io/t/better-easing-gradients-scrim-gradient/81/2 "2024-12-24T11:31:12Z")

</div>