I want to achieve a cool text effect where the background is visible through the letters.
I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible?
Imagine the text acting as a window into a gradient background, creating an interesting visual effect.
body {
background: linear-gradient(270deg, #000, #fff);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container{
width: 400px;
height: 200px;
background-color: darkred;
margin: auto;
color: #fff;
font-size: 80px;
font-weight: 900;
text-align: center;
}<div class="container">TO BE CUT OUT</div>jsfiddle: https://jsfiddle.net/nmhmxkyj/