SCSS
@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-bg: #8acbc7;
$color-title: #FFFFD9;
$color-line-3: #e25d6e;
html, body {
background: $color-bg;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.title{
font-size: 9vw;
span {
font-weight: 600;
font-family: 'Fredoka One', sans-serif;
text-transform: uppercase;
display: block;
color: $color-title;
@include longshadow($color-line-3, $color-bg, 100);
}
}
