Background clip

Utilities for controlling the bounding box of an element's background


Class reference

ClassProperties
bg-clip-borderbackground-clip: border-box;
bg-clip-paddingbackground-clip: padding-box;
bg-clip-contentbackground-clip: content-box;
bg-clip-textbackground-clip: text;

Usage

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

.bg-clip-border
.bg-clip-padding
.bg-clip-content
<div class="bg-clip-border p-6 bg-pink border-4 border-pink-200 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-pink border-4 border-pink-200 border-dashed"></div>
<div class="bg-clip-content p-6 bg-pink border-4 border-pink-200 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.

Hello world
<div class="text-5xl font-extrabold ...">
<span class="**bg-clip-text** text-transparent bg-gradient-to-r from-orange to-pink">
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 Elements’ responsive design features, check out the Responsive Design documentation.