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:

  • 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

Mike

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.