How do I apply a radial gradient to SVG text?

Paste SVG with text and click Apply radial text gradient. A radialGradient def drives the text fill.

Can radial gradients create a glow inside letterforms?

Yes. Bright center stops fading outward mimic an inner glow on bold display type.

Center cx/cy on the text bounding box works for most headlines — nudge in Source for asymmetric effects.

Fill gradients apply to fill paint. For stroke gradients use stroke="url(#...)" on text with a visible stroke width.

FAQ

Quick answers

How do I apply a radial gradient to SVG text?: Paste SVG with text and click Apply radial text gradient. A radialGradient def drives the text fill.
Can radial gradients create a glow inside letterforms?: Yes. Bright center stops fading outward mimic an inner glow on bold display type.
Where should the radial center sit for headline text?: Center cx/cy on the text bounding box works for most headlines — nudge in Source for asymmetric effects.
Does radial text gradient work on outlined stroke text?: Fill gradients apply to fill paint. For stroke gradients use stroke="url(#...)" on text with a visible stroke width.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B