<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div class="main">
  <div class = "border">
    <div class = "inner-cutout"> 
      <h1 class="knockout">Some Beach <br> Somewhere</h1>
    </div>
  </div>
</div>
html{
  background-color:#ff6f69;
  background: radial-gradient(#ff6f69, #ff8b87);

/*  background-image:url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1600x1000%2Fpublic%2F1479854258%2Fkahaluu-bay-kona-big-island-hawaii-WRLDSNST1122.jpg%3Fitok%3DSFMX3uUf&w=800&q=85');
  background-repeat: no-repeat;
    background-size: 100%;
  background-position:50% 50%;*/
}

.border{
  padding: 5px;
    background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
  background-size: 400% 400%;
  height: 400px;
  background-position: 25% 50%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 5s ease infinite;
}
.inner-cutout{
  padding: 40px 0;
  display: block;
  background-color:#ff6f69;/*#ff6f69*/
    
  margin: 2%;
  padding-bottom: 40px;
  height: 300px;
  background: radial-gradient(#ff6f69, #ff8b87);
   background-size: 300%;
  background-position:50% 50%;

}
.knockout {
  
  vertical-align: middle;
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size:50pt;
  color: blue;
  color: #fff;
  background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
  background-size: 400%;
   -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.knockout{
    animation: Gradient 5s ease infinite;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 30% 50%
  }
  50% {
    background-position: 25% 50%
  }
  100% {
    background-position: 30% 50%
  }
  
}



.main{
  width: 500px;
  height: 800px;
  margin-left: 40%;
  margin-right:40%;
  margin-top: 10%;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.