CSS background-clip text

Michael Gearon

Last updated on November 15, 2022

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

[codepen_embed height=”600″ theme_id=”light” default_tab=”css,result” slug_hash=”fAdiJ” user=”michaelgearon”]See the Pen
GIF Masking by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

Related CSS guides

Written by