<!-- https://texteffects.dev/posts/ice-text-effect -->
<div>
  <h1 data-heading="Frozen" contenteditable>
    Frozen
    
    <!-- HTML for if you're animating and/or using text shadows instead of drop shadows-->
    <!-- <span class="layer1" aria-hidden="true">Frozen</span> -->
    <span class="animation" aria-hidden="true">Frozen</span> 
  </h1>
</div>

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

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

h1 {
  transform: translate(0, -40%);
  font-size:  calc(20vw + 0.5rem);
  font-family: "frozen", serif;
  background-image: url("https://assets.codepen.io/209981/ice.jpg");
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: contain;
  position: relative;
  -webkit-text-stroke: 1px #4f90ab;
  
  // If not animating use drop-shadows to keep the effect simple and limit    HTML elements
  filter: 
    drop-shadow(0 0 2px rgba(255,255,255, 0.7))
    drop-shadow(0 0 2px rgba(41, 131, 172, 0.7))
    drop-shadow(0 0 30px rgba(125, 204, 239, 0.8))
    drop-shadow(0 0 30px rgba(58, 122, 155, 0.8));
}

// If you have performance issues with the animation use text-shadows instead of the drop shadow
/*.layer1 {
  position: absolute;
  left: 0;
  text-shadow: 
    1px -1px 2px rgba(255, 255, 255, 0.2), 
    1px -1px 2px rgba(255, 255, 255, 0.2), 
    -1px -1px 2px rgba(255, 255, 255, 0.2), 
    2px 2px 2px rgba(41, 131, 172, 0.2), 
    -2px 2px 2px rgba(41, 131, 172, 0.2), 
    -2px -2px 2px rgba(41, 131, 172, 0.2), 
    3px 3px 30px rgba(125, 204, 239, 0.5), 
    -3px 3px 30px rgba(125, 204, 239, 0.5), 
    -3px -3px 30px rgba(125, 204, 239, 0.5), 
    -6px 6px 30px rgba(58, 122, 155, 0.5), 
    6px 6px 30px rgba(58, 122, 155, 0.5), 
    -6px -6px 30px rgba(58, 122, 155, 0.5);
    -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    mix-blend-mode: hard-light;
}*/

// ANIMATION STYLES

.animation {
  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;
  -webkit-text-fill-color: transparent;
  animation: shine 7s infinite;
  background-size: 200%;
}


// The animation with data-attributes and psuedo-elements (not recommended due to accessibility issues atm) - https://textlab.dev/posts/data-attributes-and-text-effects
// h1::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%;
// }


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

@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");
}

// JS is to make the text editable for demo purpose, not required for the effect You can remove it and the effect still works.
// Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

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