How do I make gradient text in CSS?

Use background: linear-gradient(...), -webkit-background-clip: text, and -webkit-text-fill-color: transparent. The gradient is applied as a background and then clipped to the text shape.

Does CSS gradient text work in all browsers?

Yes. The -webkit-background-clip: text property works in Chrome, Firefox, Safari, and Edge. The -webkit- prefix is still required for Safari.

Can I animate CSS gradient text?

Yes. Set background-size: 200% auto and animate background-position. This creates a shimmering effect. Always wrap in a prefers-reduced-motion check for accessibility.

How to Create a CSS Text Gradient (Color Text Effect)

✨

Try CSS Text Gradient

Free, no signup →