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>

scripts

<script src="https://codepen.io/dariocorsi/pen/de198bdaf7bb0bf03ac880d82fdfa5d5.js?editors=0010"></script>

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.

Lol