Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Variable Longshadow with Gradients Mixin
<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);
}
}
}

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.