Skip to content
Visuals and effects

background-clip

Defines how far an element's background is painted. The `text` value clips the background to the shape of the glyphs.

425 effects in the catalog use this property.

Syntax

background-clip: border-box | padding-box | content-box | text;

Watch out

Gradient text usually needs all three declarations: `background-clip: text`, `-webkit-background-clip: text`, and `color: transparent` (or `-webkit-text-fill-color: transparent`).

Common values

text
Foundation of gradient text effects
padding-box
Keeps the background out from under the border

Effects using background-clip

These are working effects from the catalog. Open a tile to inspect the full source.