bg-clip-text

Clip the background to the text shape. Create stunning text effects where gradients and images are visible only through the text characters.

Quick Reference

Class	Properties
`bg-clip-text`	`background-clip: text;`

Note: Must be used with text-transparent to see the background through the text.

Interactive Demo

Gradient Text Effect

AMAZING

Hello World

Tailwind CSS

HTML Code

 <div class="text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
   AMAZING
 </div>

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

Advanced Text Effects

Animated Gradient

PULSE

 <div class="text-5xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 bg-clip-text text-transparent animate-pulse">
   PULSE
 </div>

Multi-line Text

Beautiful
Gradient
Typography

 <div class="text-3xl font-bold leading-tight bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
   Beautiful<br/>
   Gradient<br/>
   Typography
 </div>

Gradient Variations

Sunset

SUNSET

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

Ocean

OCEAN

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

Forest

FOREST

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

Rainbow

RAINBOW

from-red-400 via-yellow-400 via-green-400 via-blue-400 to-purple-400

Neon

NEON

from-cyan-400 via-purple-500 to-pink-500

Gold

GOLD

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

Best Practices & Tips

✅ Do

• Always use with text-transparent
• Use bold fonts for better visibility
• Test readability on different backgrounds
• Consider accessibility for important text

❌ Don't

• Use for body text or small fonts
• Overuse on a single page
• Use low-contrast gradients
• Forget fallback colors for unsupported browsers

Browser Support

✅ Excellent Support

background-clip: text is well supported in modern browsers:

• Chrome 3+
• Firefox 49+
• Safari 4+
• Edge 15+