<div class="container">
  <h1 class="clip-text">
   Road Trip
  </h1>
</div>
$url: "https://media.giphy.com/media/eBtpLQVJeFEBx92VCy/giphy.gif";


html, body {
  background-color:#1d1e22;
  background-image: linear-gradient(to bottom, #595f69, #6a767a, #818b8b, #9ba19e, #b6b7b4);
  height:100%;
  width:100%;
}
.container{
  display:flex;
     align-items: center;
    justify-content: center;
  height:100%;
}
.clip-text {
  padding:10px;
  background: url($url);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: #00000047; 
  
  text-transform:uppercase;
  font-size: 8rem;
  font-weight: 900;
  letter-spacing:1px;
  user-select:none;
      border-top: solid 10px #00000057;
    border-bottom: solid 10px #00000057;
  text-align:center;
}
//this is just a quick place for me to playt with background clip. 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.