The most straightforward way to knockout text is with the background-clip property. In this article, you’ll learn how CSS  background-clip works, and why to avoid a graphic substitute.

Just Grab a Graphic

Many have seen the graphics where the background image is clipped within the text. They are awesome! Without a doubt, they are really cool. However, they aren’t the most web friendly.

Before, I would use a text clipping mask to create this effect in Photoshop . Then, I would add that graphic to my website. Adding alt text to the image for accessibility. But, the only way to update the text was to create a new graphic.

The text couldn't be copy/pasted. Images could be large in file size, especially at higher resolutions. Though there were drawbacks, the image worked everywhere on all browsers.

Now, we don’t need graphics. You can now do this on the web with  -webkit-background-clip and -webkit-text-fill-color.

Just -webkit-background-clip and -webkit-text-fill-color

Both properties are what make this effect work.

The -webkit-background-clip property specifies if an element’s background image extends past its border.

The -webkit-text-fill-color property specifies the fill color of characters of text. If this property is not set, it will use the value of the color property.

But, the -webkit-text-fill-color property is a non-standard property. Beware: it will not work for every user. In other words, use -webkit-text-fill-color for fun personal projects. Not for large scale web projects where there is value in longevity and accessibility.

Used together, the -webkit-background-clip and -webkit-text-fill-color work in Chrome, Firefox, and Safari. This effect won’t work without using the -webkit- web browser engine.

Though it is a non-standardized property, -webkit-text-fill-color was invented to complete this effect. The beauty is the pairing "hides" the text in browsers that can do the clipping.

This is real web text, so with that comes all the accessibility and easy-to-change-ness.