Background Clip

Basic usage

Setting the background clip

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

<div className="**bg-clip-border** p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div className="**bg-clip-padding** p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div className="**bg-clip-content** p-6 bg-violet-600 border-4 border-violet-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 className="text-5xl font-extrabold ...">
  <span className="**bg-clip-text** text-transparent bg-gradient-to-r from-pink-500 to-violet-500">Hello world</span>
</div>