How do I make an SVG gradient fill transparent to color?

Click Fade in. A linearGradient with stop-opacity 0 then 1 is applied as the fill.

Will the checkerboard preview show the fade?

Yes. Use the transparent canvas so the incoming color is obvious.

Open SVG Linear Gradient Fade to Transparent.

Use Transparent to Color Gradient SVG Code to copy a CSS snippet too.

FAQ

Quick answers

How do I make an SVG gradient fill transparent to color?: Click Fade in. A linearGradient with stop-opacity 0 then 1 is applied as the fill.
Will the checkerboard preview show the fade?: Yes. Use the transparent canvas so the incoming color is obvious.
Need the opposite fade?: Open SVG Linear Gradient Fade to Transparent.
Can I copy CSS for this fill?: Use Transparent to Color Gradient SVG Code to copy a CSS snippet too.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B