background-clip
Specifies the 'boundary' for where the background should be visible. For example, you can clip the background to only show inside the element's text, or only within its padding area.
Quick example
h1 {
background: linear-gradient(to right, orange, red);
/* Clips the background image/color to the shape of the text */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Quick facts
Initial value
border-boxInherited
No
Applies to
all elements
Animation type
repeatableList
background-clip Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
1+
4+
5+
12+