Michael Gearon

CSS background-clip text

Michael Gearon

Last updated on

CSS3 Pseudo Element

The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element. In this guide we will look at examples using the background-clip property and the different values you can use. The background-clip property was introduced in Webkit in 2008.

Values for background-clip

As well as the text value for the background clip property we can also use these values:

Code for image clip

To mask the image around the text the code you’ll need is:

 background: ( ) no-repeat;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;

Demonstration of background-clip: text

The above demo is clipping the picture to the text using the background-clip CSS property

See the Pen CSS Image Masking by Michael Gearon (@michaelgearon) on CodePen.

The above demo is clipping the GIF to the text See the Pen GIF Masking by Michael Gearon (@michaelgearon) on CodePen.

Related CSS guides

Further reading on other websites

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.