How do I add opacity to an SVG gradient?

Paste SVG and click Apply gradient with opacity. Stops use stop-opacity so the fill can fade in or out.

Can gradient stops use rgba or stop-opacity?

This tool uses stop-opacity on solid stop-color values — the standard SVG approach for alpha on stops.

Yes. Toggle the preview background swatches to see transparency against light, dark, or checkerboard.

Yes. Set the final stop stop-opacity to 0 for a clean fade to invisible.

FAQ

Quick answers

How do I add opacity to an SVG gradient?: Paste SVG and click Apply gradient with opacity. Stops use stop-opacity so the fill can fade in or out.
Can gradient stops use rgba or stop-opacity?: This tool uses stop-opacity on solid stop-color values — the standard SVG approach for alpha on stops.
Will semi-transparent gradients show the checkerboard preview?: Yes. Toggle the preview background swatches to see transparency against light, dark, or checkerboard.
Can I fade a gradient to fully transparent?: Yes. Set the final stop stop-opacity to 0 for a clean fade to invisible.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B