<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;
	}
}
View Compiled

// 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);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.