CSS background-clip text

Michael Gearon

Last updated on November 15, 2022

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

• CSS Borders
• CSS Padding and Margin

First published on August 21, 2014