Skip to content

Instantly share code, notes, and snippets.

@PsyGik

PsyGik/scrim-gradient.scss

Forked from matthewbeta/scrim-gradient.scss
Created November 28, 2022 15:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PsyGik/e868fab9f58e6a928d8b10374838e70a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PsyGik/e868fab9f58e6a928d8b10374838e70a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @matthewbeta matthewbeta revised this gist Aug 17, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion scrim-gradient.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ Inspired by Andreas Larson - https://github.com/larsenwork
    https://css-tricks.com/easing-linear-gradients/
    */

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

    $scrimCoordinates: (
    0: 1,
  2. @matthewbeta matthewbeta created this gist Aug 17, 2017.
    38 changes: 38 additions & 0 deletions scrim-gradient.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@

    /*
    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($direction: 'to bottom', $startColor: $color-black) {

    $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);

    }