Background Clip

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

Default 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-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></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-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-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-border md:bg-clip-padding">
  <!-- ... -->
</div>

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

Customizing

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: {
      extend: {
        // ...
+       backgroundClip: ['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→

Edit this page on GitHub