<div class="text">
<span>Supah</span>
</div>
$bg-color: #010101;
$text-color: #f0c;
$depth: 10;
html, body {
height: 100vh;
}
body {
background: $bg-color;
}
.text {
color: $bg-color;
font-size: 80px;
font-family: Montserrat, serif;
font-weight: 900;
position: relative;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 500px;
text-align: center;
span {
position: absolute;
text-shadow: 1px 1px 0 $text-color, 0 1px 0 $text-color, -1px 1px 0 $text-color, -1px 0 0 $text-color, -1px -1px 0 $text-color, 0 -1px 0 $text-color, 1px -1px 0 $text-color;
@for $i from 1 through $depth + 1 {
&:nth-child(#{$i}) {
transform: perspective(1600px) rotateY(35deg + $i * 4) rotateX(50deg + $i * 3) translateZ(-25px * $i) scale(1 + $i * 0.2);
z-index: $depth - $i;
$hue: adjust-hue($text-color, $i * 3);
$color: rgba($hue, ($depth + 2 - $i) * .15);
text-shadow: 1px 1px 0 $color, 0 1px 0 $color, -1px 1px 0 $color, -1px 0 0 $color, -1px -1px 0 $color, 0 -1px 0 $color, 1px -1px 0 $color, -20px 20px 20px rgba(0, 0, 0, .9);
}
}
}
}
View Compiled
var el = document.querySelector('span'),
depth = 10;
for (i = 0; i < depth; i++) {
el.parentNode.append(el.cloneNode(true));
}
This Pen doesn't use any external JavaScript resources.