Background Clip

v1.7.0+

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.

To control the bounding box of an element’s background at a specific breakpoint, add a {screen}: prefix to any existing background clip utility. For example, adding the class to an element would apply the bg-clip-padding utility at medium screen sizes and above.

By default, only responsive variants are generated for background clip utilities.

You can control which variants are generated for the background clip utilities by modifying the backgroundClip property in the section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

  Background Color →