Michael Gearon

CSS background-clip text

Michael Gearon

Last updated on

The code for masking text using the background clip property with the value of text

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:

  • border-box is the default value. This allows the background to extend all the way to the outside edge of the element’s border.
  • padding-box clips the background at the outside edge of the element’s padding and does not let it extend into the border.
  • content-boxclips the background at the edge of the content box.
  • inital sets this property to its default value.
  • inherit applies the background-clip setting of the parent to the selected element.

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 below demo is clipping the picture to the text using the background-clip CSS property

See the Pen
GIF Masking
by Michael Gearon (@michaelgearon)
on CodePen.light

Related CSS guides

Michael Gearon

Written by

Michael Gearon

Michael Gearon is a Senior Interaction Designer at Government Digital Service (GDS) in Cardiff. Michael Gearon is one of the authors of The Tiny CSS Projects book, published by Manning Publications. 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.