How do I create a linear gradient on SVG text?

Paste SVG with text and click Apply linear text gradient. A linearGradient def drives the text fill.

Can linear text gradients run diagonally across letters?

Yes. Adjust the linearGradient vector in Source or start from SVG Gradient Angle Generator for degree control.

Yes. Apply to the parent text or set fill on individual tspans for multi-line effects.

A headline-style text element sized for the viewBox so the gradient span is easy to preview.

FAQ

Quick answers

How do I create a linear gradient on SVG text?: Paste SVG with text and click Apply linear text gradient. A linearGradient def drives the text fill.
Can linear text gradients run diagonally across letters?: Yes. Adjust the linearGradient vector in Source or start from SVG Gradient Angle Generator for degree control.
Does fill="url(#id)" work on tspan elements too?: Yes. Apply to the parent text or set fill on individual tspans for multi-line effects.
What sample text does the linear text gradient page use?: A headline-style text element sized for the viewBox so the gradient span is easy to preview.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B