Background Clip

Restricts the area an element’s background is painted in. Three of its values are boxes; the fourth is text, which cuts the background down to the element’s own glyphs. Check out the MDN for how to use.

.headline {
  width: 320px;
  height: 140px;
  margin-top: 16px;

  padding: 16px;
  border: 12px dashed rgba(0, 0, 0, 0.35);

  font-size: 56px;
  text-align: center;
  color: transparent;

  background-image: linear-gradient(120deg, gold, crimson 40%, deepskyblue);
  background-clip: text;
}

Values

border-box, padding-box, content-box and text.

A comma-separated list gives one value per background image layer, in the same order as background-image, and repeats if it is shorter than the list of images. The background-color takes the last value in the list, as CSS has it:

background-image: linear-gradient(gold, crimson), url(res:noise);
background-clip: text, border-box;

The background shorthand carries it too. CSS spells the clip and the painting origin with the same three box keywords there, so one box in a layer sets both and two set the origin first:

background: linear-gradient(gold, crimson) text;

Notes

• text clips the background and nothing else — the glyphs are still painted over it in their own color. Pair it with color: transparent for the gradient-text effect.
• Every glyph under the element counts, a child element’s text included, and nothing else does: an element with no text and background-clip: text paints nothing at all.
• It clips whatever the layer is — a gradient, an image, a blended layer, the background colour — and leaves borders, box-shadow and mask-image alone, as CSS does.
• The glyphs are rasterised into a coverage texture the size of the element, by a command buffer rather than a camera, and only when the text, its layout or that size changes. An element whose text is sitting still costs nothing per frame.
• border-box reaches under the border, so a dashed, dotted or semi-transparent one shows the background through it, and the outer border-radius is what rounds it off. padding-box stops at the border’s inner edge and content-box at the padding’s, each with what that box has left of those corners.
• The three boxes only differ on an element that has a border or padding to separate them; where they coincide, asking for one costs nothing.