How do I make SVG gradient transparent edges?

Click Soft edges. The fill is clear at both ends and solid in the middle.

Is this the same as a CSS vignette?

Similar look, SVG stops. You can copy the markup into any icon or banner.

Use Fade in or Fade out instead of both-edge softening.

Yes — edges become the PNG background. Preview on checkerboard first.

FAQ

Quick answers

How do I make SVG gradient transparent edges?: Click Soft edges. The fill is clear at both ends and solid in the middle.
Is this the same as a CSS vignette?: Similar look, SVG stops. You can copy the markup into any icon or banner.
Can I keep one edge solid?: Use Fade in or Fade out instead of both-edge softening.
Will transparent edges show on a white PNG export?: Yes — edges become the PNG background. Preview on checkerboard first.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B