v150 · CSS · demo
Clip Value Comparison
All five background-clip values side by side with identical settings. Adjust border width and padding to see exactly where each value allows the background to paint.
Background extends to the outer edge of the border. The default value — background paints under the border and through padding into the content area.
background-clip: border-box
Background stops at the inner edge of the border. The border area is transparent — useful when you want the border colour to show without it blending with the background.
background-clip: padding-box
Background is clipped to the content box only. Both the border and padding areas are transparent — the background appears only inside the element's content rectangle.
background-clip: content-box
Background is clipped to the foreground text glyphs. Combine with color: transparent to create gradient text effects. (Wider support via -webkit-background-clip.)
background-clip: text
Background is clipped to only the area painted by the border strokes — ignoring border-color transparency. The content and padding areas are transparent. Perfect for gradient borders without pseudo-elements.
background-clip: border-area
The shaded outer ring is the border-area — the only zone where background-clip: border-area allows the background to paint.
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗