How do I make an SVG linear gradient fade to transparent?

Click Fade out. The last stop uses stop-opacity 0 so the fill dissolves.

Is this a mask or a gradient?

A gradient. No mask element is added — only defs + fill=url(#...).

Use SVG Gradient Transparent Edges.

Yes if the file has a text or shape target. The sample uses a rect.

FAQ

Quick answers

How do I make an SVG linear gradient fade to transparent?: Click Fade out. The last stop uses stop-opacity 0 so the fill dissolves.
Is this a mask or a gradient?: A gradient. No mask element is added — only defs + fill=url(#...).
Need both edges clear?: Use SVG Gradient Transparent Edges.
Does fade to transparent work on text?: Yes if the file has a text or shape target. The sample uses a rect.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B