🎨CSS & Color

CSS Text Gradients

Apply gradient backgrounds to text for eye-catching titles.

Explanation

Uses background-clip: text to show a gradient only through the letters.

Examples

Gradient Text

Output

linear-gradient(to right, #6366f1, #a855f7)

Code Examples

CSS

.title-gradient {
  background: linear-gradient(to right, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

Try it Now

Open in Text Gradient

💡 Tips

Works best on bold, thick fonts
Always provide a fallback color for older browsers
Ensure the background doesn't make the text unreadable

⚠️ Common Pitfalls

Can be buggy in some older mobile browsers