Use background-clip: text with -webkit-background-clip: text. Apply a gradient to the background, then clip it to the text shape. Set color: transparent so the gradient shows through.

Full example: background: linear-gradient(to right, red, blue); -webkit-background-clip: text; background-clip: text; color: transparent;. The gradient becomes your text fill.

Browser support is solid—Chrome, Firefox, Safari, Edge all handle it.

Keep the -webkit- prefix for wider compatibility.

Text gradient fills the text with a color gradient using background-clip: text. The text itself becomes multi-colored. Text-shadow adds a shadow behind the text—doesn't change the text color, just adds depth around it. You can combine them for maximum impact.

Use gradients for vibrant, eye-catching text—logos, headings, hero sections. Use text-shadow for subtle depth. Don't overdo it—can get messy fast with too many effects.

Yep. Animate the background-position or background-size for movement. Make the gradient wider than the text, then slide it: @keyframes gradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }.

For color shifts, use @keyframes to change the gradient colors themselves. Gets fancy—rainbow effects, shimmer animations, color waves.

Performance tip: animating background-position is cheaper than changing colors.

Test on mobile—gradient animations can be heavy on weaker devices.

Common issues:

• Forgot color: transparent? The text color blocks the gradient
• Missing -webkit-background-clip: text? Always include both prefixed and unprefixed versions
• display: inline? Try inline-block or block instead
• Typos in gradient syntax? Use dev tools to inspect

If the gradient works on a div but not text, you're probably missing one of the clip properties.

Keep gradients readable. High contrast between colors helps—avoid gradients where colors are too similar or too dark. Subtle gradients (2-3 colors, close hues) often look more professional than rainbow effects.

Use gradient text sparingly. Great for headings, CTAs, logos—not for body text. One or two gradient elements per page is plenty.

Provide fallbacks. Set a solid color first: color: #FF5733; background: linear-gradient(...); color: transparent;. Old browsers ignore the gradient, keep the solid color.

Absolutely. Any gradient type works—linear, radial, conic. Same technique, different gradient function. Radial gradients create spotlight or burst effects. Conic gradients make rainbow wheels.

Both are trickier to control than linear—you need to fine-tune the position and size to look good on text. Play with background-position and background-size.

Linear is easiest and most common. But hey, experiment. Sometimes a conic gradient is exactly what your design needs.