Background Clip

Utilities for controlling the bounding box of an element’s background.

Use the utilities to control the bounding box of an element’s background.

Use bg-clip-text to crop an element’s background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the bg-clip-padding utility at only medium screen sizes and above.