background-clip:
text

Mar 20, 2008

by Dave Hyatt

CSS3 has introduced a property called background-clip that can be used to clip backgrounds to either the border, padding or content box. I have extended this property with a fourth value, text, that causes the background image to clip to foreground text (including decorations and shadows). The shape of the foreground content (including alpha transparency in the content) is applied as a mask to clip background drawing for the box.

Here is an example:

<div style="background: url(https://webkit.org/wp-content/uploads/green-background.png), black; border:5px solid black; padding:5px; -webkit-background-clip: text, border; color: transparent">
This background clips to the text.
</div>

And here is how it looks (if you try it out in ToT):

This background clips to the text.

This effect can be used with -webkit-text-stroke and a transparent -webkit-text-fill-color to create text with stroked outlines that is “filled” with the background.

In addition, this visual effect can work with fixed backgrounds, so that text can look like it’s “punching a hole” through to the viewport.