<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>

//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);
    }   
  }
}