Background
background-clip
background-clip sets how far the background (its color and images) is painted. It can even cut the background to the shape of the text.
Syntax<bg-clip># …
<bg-clip>#
<bg-clip> = <visual-box> | [ border-area || text ]
<visual-box> = content-box | padding-box | border-boxPreview
Code
.box {
background-image: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border: 16px dashed rgb(31 41 55 / 0.3);
padding-block: 16px;
padding-inline: 16px;
color: transparent;
background-clip: text;
}Controls
About
Values
border-box(the initial value): painted under the border too.padding-box: painted inside the border (padding included).content-box: painted only in the content area, without the padding.border-area: painted only within the shape the border draws, such as just the dashes of a dashed border. The shape is used even when the border color is transparent.text: painted only within the shape of the text.
The preview on this page uses helper declarations to lay a gradient as the background and give the box a 16px translucent dashed border and 16px of padding. The gaps in the dashes show whether the background reaches under the border.
Cutting to the text (text)
With text, the background is cut to the shape of the text. The text color is painted on top, so pair it with color: transparent to make, for example, gradient text (the preview on this page makes the text transparent with a helper declaration). The text disappears if the background isn't painted, so set a background color as well in case the background image fails to load.
Unprefixed text works in Chrome and Edge from 120 and Safari from 14. For older browsers, also write -webkit-background-clip: text.
Cutting to the border (border-area)
border-area makes gradient borders possible: set the border color to transparent. It works in Chrome and Edge (150 and later) and Safari (18.2 and later); Firefox doesn't support it yet. Written together with text, the background is painted in the shapes of both the text and the border.
The background shorthand and layers
When the background shorthand has a single box keyword, it sets both background-origin and background-clip to it. With two, the first is background-origin and the second is background-clip.
With several background images, write one value per layer, separated by commas. The background color is clipped by the background-clip of the bottom-most image.