← Back to catalog📄 Implementation guide
Text

Gradient Text

Fills typography with a gradient instead of a flat color.

Modern, premium, trendy

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: Hero headlines, CTAs

✦ Prism 3.0 — the gradient engine

Every screen,
in full spectrum.

Prism is the one canvas where color, type, and motion ship straight to production — no exports, no flat handoffs.

Accessibility — gradient glyphs render transparent, so Prism sets a solid color fallback first. The headline stays legible where background-clip: text is unsupported, or in forced-colors mode.

Technique: a linear-gradient(...) background painted onto the glyphs with -webkit-background-clip: text; background-clip: text while the text fill is color: transparent (static fill, with a solid color fallback)