Home
Products
Grids
Blog
Support
Donate
About
   

Playing with CSS background clip & text

The CSS background clip property with a text value can add a urbane dash of creativity.

Basic image masking

A simple example of how background clip and text works, along with text-fill-color.
ELVIS
CSS
HTML
The value text in the -webkit-background-clip property clips the background to the foreground text, which is set to transparent by the -webkit-text-fill-color property.

The font size is responsive via the vw unit. Viewport width is the width of the browser window, and in this example has a value of 15, or 15% of the viewport width.

Fixed background with image mask

A fixed background, background clip and text-fill-color.
ELVIS
CSS
HTML
As the method above, only with a fixed background, using the no-repeat and fixed properties.

Image masking and hover

Background clip also supports the hover selector.
ELVIS
CSS
HTML
The -webkit-background-clip and -webkit-text-fill-color properties work with Chrome 15+, Firefox 4+ and Safari 7+. For Edge and other browsers you can use feature queries to polyfill.
CSS
Latest & featured