Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:6Length:31 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Using `background-clip`

The first text masking technique we’re going to cover uses a CSS property called background-clip, and it’s probably the easiest one to use. Let’s begin.

Related Links

2.1 Using `background-clip`

The first technique uses a CSS property called background clip, and it's probably the easiest one to use. So, let's begin. So let's say we have this h1, and we wanna display an image as a background to this text, all right? So, let's go in here, and let's say h1. As you can see, I already prepared just some demo styles for the text. And you'll find these in pretty much all the demos we'll be looking at in this course. I'm setting a display flex on the body to be able to align this element in the center. Setting a font family, a little bit of padding, and then some properties to the h1, like a font weight, size, and aligning it in the center. So let's actually bring back this background, and then on the h1 we'll do this background. We're gonna have a URL, and I just grabbed an image from Unsplash, you'll find links to it down below. And let's position this, something like 25%, 30%, and no repeat. So I'm positioning it in such a way that I'm getting the more interesting parts of the image right where I want them. I'm also going to set a background size of cover, just so that I have a high resolution image showing through and the image is not scaled too much. So now, how do we take this background and put it inside my text? Well, as I was saying, we're gonna use a property called background clip. So background-clip sets whether an element's background color or image extends underneath its border. And it has a few different properties you can choose from, border-box, padding-box, content-box, and finally text. So you do this background-clip, and you set the value to text. So let's go ahead and do that, So background-clip text. Okay, so now what happens is the image only comes through the shape of our text, but we're not actually seeing it. You can see a very faint border around each letter, but nothing comes through the text. And that's because the text actually has a color, so we can't see it. In order to see it, there is a very simple thing we can do. We can say webkit-text-fill-color: transparent. And just like that we're removing the text fill, we're making it transparent, so the image now shines through my text. And this works with any kinda text, any kind of font, it doesn't really matter. And this is the easiest technique you can use to create this type of text, to do text masking essentially. Now what about browser support? Well, if we take a look at can I use background-clip, we have these CSS3 background image options. And as you can see, it's very well supported across the board. All the modern browsers support it, even the latest versions of Edge. And even Internet Explorer supports this, so fantastic. This is probably the technique with the widest browser support of all five that we're gonna explore in this course. Now instead of this text-fill-color property, you can actually use color: transparent. And that's gonna work just as well. Now this also works with a gradient. You don't necessarily have to use an image as a background. So, let's comment this. And let's use a linear gradient, in which case, you don't need this either. So I just grabbed a random CSS gradient from the web, paste it in here, and there you go. I have gradient text. So that was the very first technique using the property called background-clip. It's the easiest one to use and with the highest browser support of everything we're gonna cover today. Now in the next lesson, we're gonna have a look at how to create text like this using blend modes. So stay tuned, coming up.

Back to the top