Background Clip

Tailwind CSS version

v1.7.0+

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

Class reference

Usage

Use the bg-clip-{keyword} utilities to control the bounding box of an element’s background.

<div class="bg-clip-border p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>
<div class="bg-clip-padding p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>
<div class="bg-clip-content p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>

Cropping to text

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.

<div class="text-center text-5xl font-extrabold leading-none tracking-tight">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
    Hello world
  </span>
</div>

Responsive

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 md:bg-clip-padding to an element would apply the bg-clip-padding utility at medium screen sizes and above.

<div class="bg-clip-padding md:bg-clip-border">
  <!-- ... -->
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Responsive and pseudo-class variants

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 variants section of your tailwind.config.js file.

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     backgroundClip: ['responsive'],
+     backgroundClip: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the background clip utilities in your project, you can disable them entirely by setting the backgroundClip property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundClip: false,
    }
  }

← Background Attachment   Background Color →