Question 1

How does CSS gradient text work?

Accepted Answer

The technique uses 3 CSS properties: background: linear-gradient(...); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;. The text becomes a 'mask' for the gradient background, so the gradient is visible only where the text glyphs are.

Question 2

Does gradient text work on all browsers?

Accepted Answer

Yes — all modern browsers (Chrome, Firefox, Safari, Edge) support background-clip: text. The -webkit- prefix is included for Safari. The tool outputs both prefixed and unprefixed properties for maximum compatibility.

Question 3

Can I use gradient text on any font?

Accepted Answer

Yes. The gradient text technique works on any element, including headings, paragraphs, spans, and links. It works with any font, but bolder weights (600-900) make the gradient more visible because the glyphs cover more area.

Question 4

What are the best gradient combinations?

Accepted Answer

For maximum readability and visual impact: use 2-3 colors with high contrast, avoid pure red+green (color-blind unfriendly), and consider your background. The tool includes 10 curated presets (sunset, ocean, candy, fire, neon, etc.) that are tested and look great on dark backgrounds.