<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;
}
View Compiled
//this is just a quick place for me to playt with background clip.
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.