How do I create a multi-color SVG gradient?

Paste SVG and click Apply multi-color gradient. Three or more stops are written into defs with even spacing.

What is the minimum number of colors for a multi-stop gradient?

Three or more distinct stops qualify as multi-color. Two-stop fades use SVG Gradient Generator From Colors.

Yes. Open Multi-Color SVG Linear Gradient Generator or Multi-Color SVG Radial Gradient Generator for type-specific presets.

Yes. Pair with Multi-Color SVG Background Gradient Generator to cover the full viewBox.

FAQ

Quick answers

How do I create a multi-color SVG gradient?: Paste SVG and click Apply multi-color gradient. Three or more stops are written into defs with even spacing.
What is the minimum number of colors for a multi-stop gradient?: Three or more distinct stops qualify as multi-color. Two-stop fades use SVG Gradient Generator From Colors.
Can multi-color gradients be linear or radial?: Yes. Open Multi-Color SVG Linear Gradient Generator or Multi-Color SVG Radial Gradient Generator for type-specific presets.
Are multi-color gradients good for hero backgrounds?: Yes. Pair with Multi-Color SVG Background Gradient Generator to cover the full viewBox.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B