How does the SVG fade out gradient generator work?

Click Generate fade-out. A three-stop linearGradient eases from opaque to clear.

Why three stops instead of two?

A mid opacity stop looks less abrupt than a two-stop linear drop.

Yes. Paste any SVG with a shape; the fill is replaced.

Generate here, then copy Source — or use the transparent-to-color code page.

FAQ

Quick answers

How does the SVG fade out gradient generator work?: Click Generate fade-out. A three-stop linearGradient eases from opaque to clear.
Why three stops instead of two?: A mid opacity stop looks less abrupt than a two-stop linear drop.
Can I generate fade-out on my own icon?: Yes. Paste any SVG with a shape; the fill is replaced.
Need CSS output too?: Generate here, then copy Source — or use the transparent-to-color code page.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B