Michael Gearon

CSS background-clip text

Michael Gearon ยท

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

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

Michael Gearon

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.