<div>
<h1 contenteditable data-heading="Frozen">
	Frozen
</h1>
</div>

<p>Click word change the text</p>
$color1: white;
$color2: black;

html,
body {
	background: linear-gradient(to bottom, #000428, #004e92),
		url("https://assets.codepen.io/209981/ice5.jpg");
	background-blend-mode: saturation;
	background-size: cover;
}

p {
	color: white;
	text-align: center;
}

html,
body {
	height: 100%;
}

div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	position: relative;
}
h1 {
	// background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
	transform: translate(0, -40%);
	font-size: 20vw;
	margin: 0;
	font-family: "frozen", serif;
	font-weight: 700;

	background-image: url("https://assets.codepen.io/209981/ice.jpg");
	-webkit-background-clip: text;
	background-size: contain;
	// width: 100%;
	text-align: center;
	color: transparent;
	font-weight: 900;
	position: relative;

	&::after {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		text-shadow: 1px -1px 2px rgba(#fff, 0.2), 1px -1px 2px rgba(#fff, 0.2),
			-1px -1px 2px rgba(#fff, 0.2), 2px 2px 2px rgba(#2983ac, 0.2),
			-2px 2px 2px rgba(#2983ac, 0.2), -2px -2px 2px rgba(#2983ac, 0.2),
			3px 3px 30px rgba(#7dccef, 0.5), -3px 3px 30px rgba(#7dccef, 0.5),
			-3px -3px 30px rgba(#7dccef, 0.5), -6px 6px 30px rgba(#3a7a9b, 0.5),
			6px 6px 30px rgba(#3a7a9b, 0.5), -6px -6px 30px rgba(#3a7a9b, 0.5);
		color: transparent;
		mix-blend-mode: color-burn;
		background-image: url("https://assets.codepen.io/209981/ice.jpg");
		-webkit-background-clip: text;
		background-size: contain;
	}

	&::before {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		background: linear-gradient(
			45deg,
			rgba(255, 255, 255, 0) 45%,
			rgba(255, 255, 255, 0.8) 50%,
			rgba(255, 255, 255, 0) 55%,
			rgba(255, 255, 255, 0) 100%
		);
		-webkit-background-clip: text;
		color: transparent;
		animation: shine 7s infinite;
		background-size: 200%;
		-webkit-text-stroke: 1px #4f90ab;
	}
}

@keyframes shine {
	0% {
		background-position: -120%;
	}
	10% {
		background-position: 120%;
	}
	100% {
		background-position: 120%;
	}
}

/* Not needed for demo */

@font-face {
	font-family: "frozen";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff");
}
View Compiled

// JS is to make the text editable for 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.