CSS Background-Clip 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 post we will look at some examples.

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

To mask an clip the image to the text the basic code is:

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

Demonstration

The below demo is clipping the picture to the text

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

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

Further Reading

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.