Clip an image to text with CSS

It's surprisingly easy to clip a background image to some text!

We can use the background-clip property to do it. This let's change how a background is clipping, with padding-box, border-box and content-box all being options. This time though, we're focused on `background-clip: text`.

The only issue is, when you first do it, you won't see your text, so you'll want to make that text transparent so you can actually see the image.

#fiveminutefriday

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[WebDevSimplified]

Nice video. I actually just used this technique last week to create an animated text reveal by moving a plain colored background around my text to hide/show parts of my text.
I was also surprised, like you mentioned, to see how high the browser support is for this feature when prefixed. Luckily, it is also very easy to fallback to a plain text color when in a non-supported browser.

[vijayroy]

You are just like guy in TV show who unfold all the mystery behind magic. My super like to you and your hard work 👍

[ShirazEsat]

Yay! More like this please. There are so many little things to learn that quickly add value to our sites.

[jhred]

You always explain the theory clearly. That is why I feel so comfortable with your video. Thank you Keven!

[vladimirmikulic]

I am late to the party, but I have to say you are KING. I am doing back end and I am not so much of a designer, but you really inspire me. True professional 👌

[facundocorradini]

Great video. I'm totally loving "Five Minutes Friday". When using this in production make sure to do so inside a @supports query, otherwise browsers not supporting "background-clip:text" will only get invisible text, which is obviously not good.
Or use a SVG <text> with a fill: url(#pattern), with #pattern being a SVG <pattern> containing the <image> on the SVG <defs>. (damn, that came out way too entangled for a youtube comment...) That option (if any human understood) has just perfect browser support, down to prehistoric IE.

[joeldcanfield_spinhead]

I miss 5-Minute Fridays. Came back to this one 'cause I finally need to do this.

[trentgrunewald]

My favorite Canadian strikes again! I was actually just looking for this, but I will be using it to have a gif show through. Thanks Kevin! Hope you had a great Thanksgiving.

[Risha]

Awesome! I wish I new it 3 years ago when I failed similar to this task at my job and asked a designer to come up with another visual solution.

[TheElkster]

You are amazing! Love your channel! Love your videos! Very clear, very relevant and easy to follow!!! Thank you for your contributions!!! 😉

[chaitanyajharbadem-]

Thanks for giving amazing idea and font too looking for that type font from too long

[napoleonmila]

Thanks Kevin, keep doing videos like this!!!!

[clevermissfox]

I’m so lost when it comes to clip paths other then their default states. Hopefully by the end of this video I’ll have a clue

[SazikimiJaeger]

Thanks a lot again. Right to the point of what you are teaching and also in the most simplest way. Thanks a lot. You are a genius. Thanks for teaching us. I'm learning a lot from you.

[parasarora]

just loved it...and the opening intro was fabulous 😱😱😱...I am going to try this text trick✌️😎✌️

[feeham]

Very helpful and fun too, awsome new series mate...

[richbaker]

Learning so much from your channel! Thank you!

[patrickc.]

I love it! Awesome tips Kevin, keep going!!!

[letroy]

Important question! I tried the entire thing step by step and at the end something was wrong: I couldn't stop thinking "how can you, dude, can be so cool sharing thit kind of stuff?" That's just amazing, thanks :D Cheers from France!

[AliAkbar-vote]

Exactly what I have thought you would do. Thanks for the video.