How do I make an SVG gradient border with no fill?

Paste the shape and click Apply transparent-fill border. Fill becomes none/transparent; stroke paints the gradient.

Will text behind a transparent-fill border show through?

Yes. Clear fills let underlying content show inside the frame.

Open Text Gradient Border for letter-edge presets.

No — free, browser-only processing.

FAQ

Quick answers

How do I make an SVG gradient border with no fill?: Paste the shape and click Apply transparent-fill border. Fill becomes none/transparent; stroke paints the gradient.
Will text behind a transparent-fill border show through?: Yes. Clear fills let underlying content show inside the frame.
Need a text-specific gradient outline?: Open Text Gradient Border for letter-edge presets.
Does this transparent border tool upload files?: No — free, browser-only processing.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B