Variable Longshadow with Gradients Mixin

index.html

<div class="content">
  <h1 class="title">
    <span class="title-part line-1">Variable</span>
    <span class="title-part line-2">Spread</span>
    <span class="title-part line-3">Long Shadows</span>
    <span class="title-part line-4">With</span>
    <span class="title-part line-5">Gradients</span>
  </h1>
</div>

style.scss

//function + mixin
@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  text-shadow: shadow-string($color1, $color2, $length);    
}

//color vars
$color-bg:#FFEA80;
$color-title:#FFFFD9;
$color-line-1:#FF6138;
$color-line-2:#FFB400;
$color-line-3:#00A388;
$color-line-4:#005AB3;
$color-line-5:#8100FF;

//styling
body{
  padding:2rem;
  text-align:center;
  background: $color-bg;
  letter-spacing:.08em;
  line-height:1.4;
}

.title{
  font-size:7vw;
  .title-part{
    font-weight: 600;
    font-family:'Fredoka One', sans-serif;
    text-transform:uppercase;
    display:block;
    color:$color-title;
    &.line-1{
      @include longshadow($color-line-1, $color-bg, 120);
    }
    &.line-2{
      @include longshadow($color-line-2, $color-bg, 60);
    }
    &.line-3{
      @include longshadow($color-line-3, $color-bg, 100);
    }  
    &.line-4{
      @include longshadow($color-line-4, $color-bg, 100);
    }  
    &.line-5{
      @include longshadow($color-line-5, $color-bg, 100);
    }   
  }
}

Variable Longshadow with Gradients Mixin.markdown

Variable Longshadow with Gradients Mixin

"Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."

This doesn't need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.

A Pen by Dario Corsi on CodePen.

License.