background-clip

Back to the index.

This page tests background-clip. Which area does the background image fill? The padding box, the content box, or the border box? Remove border for a good idea of what’s going on.

border-box (default)

The background fills the border box.

border-box

padding-box

The background fills the padding box.

padding-box

content-box

The background fills the content box.

content-box

text

-webkit-background-clip: text; 
color: transparent; 
THIS IS THE TEXT
THIS IS THE TEXT