CSS Text Image Clip Example
Below is an example of a CSS text image clip that we did with a team photo. I think it came out pretty nice and it wasn’t too difficult. Let’s see how we did this. Buckle up and let’s go!
This Is How We Accomplished This Effect
CSS
.rainbowtext:after {content: "702 Pros";font-size: 480px;font-weight: 900;position: absolute;background-position:30% 190%;background-size: 81%;top: 0;text-transform: uppercase;left:0;line-height: .8em;background-image: url('https://702pros.com/wp-content/uploads/2022/03/Team-Photo-702-Pros-National-Employee-Appreciation-Day-2022-1024x577.jpg');-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: rgba(255, 255, 255, 0)!important;-webkit-box-decoration-break: clone;text-fill-color: transparent;filter: drop-shadow(0 0 5px #000000);}@media screen and (max-width: 767px) {.rainbow-text:after{font-size: 52px;}}
HTML
<h2 class="rainbow-text">702 Pros</h2>(remove spaces after <)