The background-clip property defines how far a box's background (color and images) extends — to the border edge, padding edge, content area, or clipped to the foreground text shape. With multiple comma-separated layers, a value may be given per layer..box {
background-clip: padding-box;
}.gradient-text {
background-image: linear-gradient(90deg, magenta, cyan);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}border-boxBackground is painted out to the outer edge of the border (default).padding-boxBackground is painted out to the outer edge of the padding — not under the border.content-boxBackground is painted only within the content area.textBackground is clipped to the shape of the foreground text — useful for text-with-background effects.border-areaBackground extends through the border area itself (Level 4 addition).CSS Backgrounds Module Level 4First Public Working DraftW3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
