Background Clip

Control how an element's background is clipped with border-box, padding-box, content-box, and text utilities.

Quick Reference

Class	Properties	Description
`bg-clip-border`	`background-clip: border-box;`	Background extends to border edge
`bg-clip-padding`	`background-clip: padding-box;`	Background excludes border area
`bg-clip-content`	`background-clip: content-box;`	Background only in content area
`bg-clip-text`	`background-clip: text;`	Background clipped to text shape

Interactive Comparison

bg-clip-border

Content

Includes border + padding + content

bg-clip-padding

Content

Includes padding + content

bg-clip-content

Content

Content area only

bg-clip-text

TEXT

Text shape only

Text Effects Gallery

Sunset

SUNSET

from-orange-500 via-red-500 to-pink-500

Ocean

OCEAN

from-blue-500 via-cyan-500 to-teal-500

Aurora

AURORA

from-green-400 via-blue-500 to-purple-600

Galaxy

GALAXY

from-violet-600 via-purple-600 to-indigo-600

Fire

FIRE

from-red-600 via-orange-500 to-yellow-400

Emerald

EMERALD

from-teal-400 via-emerald-500 to-green-600

Common Use Cases

🎨 Hero Titles

Amazing Product

Perfect for landing page headlines and hero sections

 <h1 class="text-5xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
   Amazing Product
 </h1>

🏢 Brand Logos

BRAND

Colorful brand text without images

 <div class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
   BRAND
 </div>

🃏 Card Backgrounds

Card Title

Background excludes border area

<div class="bg-clip-padding p-6 bg-gradient-to-br from-green-400 to-blue-500 border-4 border-green-600">

📄 Content Sections

Background only in content area

<div class="bg-clip-content p-8 bg-gradient-to-r from-purple-400 to-pink-400 border-4">

Browser Support

✅ Excellent Support

background-clip: border-box | padding-box | content-box

• Chrome 1+
• Firefox 4+
• Safari 3+
• Edge 12+

⚠️ Limited Support

background-clip: text requires vendor prefixes

• Chrome 3+ (-webkit-)
• Firefox 49+
• Safari 4+ (-webkit-)
• Edge 15+