Long Gradient Shadow

index.html

<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<blockquote>
  <span>Death is a</span>
  <span>shadow</span>
  <span>that</span>
  <span>always</span>
  <span>follows</span>
  <span>the</span>
  <span>body</span>
</blockquote>

long-gradient-shadow.markdown

Long Gradient Shadow

A Pen by Fabio Ottaviani on CodePen.

License.

script.js

function animate() {
  document.querySelector('blockquote').classList.toggle('animate');
}

document.addEventListener('click', animate);

setTimeout(animate, 1000);

style.scss

$bg-color: #eee;
$shadow-color: #1ce;

html, body {
  width: 100vw;
  height: 100vh;
  background: $bg-color;
  margin: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
}

@function shadow($color, $depth) {
  $val: 0 0 $color;
  @for $i from 1 through $depth {
    $hue: adjust-hue($color, $i * 0.1);
    $val: #{$val}, -#{$i}px #{$i * 0.5}px $hue;
  }
  $extra1: ', 0 -1px ' $color;
  $extra2: ', 1px 0 ' $color;
  $extra3: ', 1px 1px ' $color;
  @return $val + $extra1 + $extra2 + $extra3;
}

blockquote {
  font: italic 900 60px/1 Montserrat, sans-serif;
  color: $bg-color;
  margin: auto;
  text-shadow: shadow($shadow-color, 1000);
  
  &:before {
    content: 'CLICK';
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 900 14px/1 Montserrat;
    color: $shadow-color;
    letter-spacing: 3px;
    animation: pulse .5s ease-in alternate infinite;
    text-shadow: none;
  }

  span {
    display: block;
    transform: translate3d(-50vw, 30vw, 0);
    opacity: 0;
    transition: all 1s cubic-bezier(.65,.02,.23,1);
    @for $i from 1 through 7 {
      &:nth-child(#{$i}) {
        transition-delay: .1s * $i;
        z-index: $i;
      }
    }
  }

  &.animate {
    &:before {
      display: none;
    }
    
    span {
      opacity: 1;
      position: relative;

      @for $i from 1 through 7 {
        &:nth-child(#{$i}) {
          transform: translate3d(20px * $i, 0, 0);
          transition-delay: .1s * (7 - $i);
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet" />