<h1 contenteditable data-heading="Ledge">Ledge</h1>

html, body {
  height: 100%;
  background: #abd1d5;
  width: 100%;
  font-family: 'Roboto', sans-serif;
}

h1 {
  color: transparent;
  line-height: 1;
  font-size: 20vw;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  position: absolute;
  font-weight: 900;
  white-space: nowrap;
  
  &:before,
  &:after {
    content: attr(data-heading);
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  &:before {
    left: 1.25vw;
    top: -30%;
    z-index: 2;
    color: #171210;
    transform: scale(1, .4) skew(10deg);
  }

  &:after {
    left: 0;
    z-index: 1;
    color: transparent;
    transform: scale(1, 1.2);
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 20%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

// JS is to make the text editable fot demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});