How do I create a multi-color radial SVG gradient?

Paste SVG and click Apply radial multi-color. Stops radiate from the gradient center outward.

Where is the center point of a radial multi-color gradient?

Default cx/cy sit at the viewBox center. Edit Source to nudge the focal point for spotlight effects.

Yes. Add as many stops as you need — Custom Multi-Color SVG Gradient Generator helps with manual placement.

Yes. They work well for orbs, badges, and vignette-style background washes.

FAQ

Quick answers

How do I create a multi-color radial SVG gradient?: Paste SVG and click Apply radial multi-color. Stops radiate from the gradient center outward.
Where is the center point of a radial multi-color gradient?: Default cx/cy sit at the viewBox center. Edit Source to nudge the focal point for spotlight effects.
Can radial gradients blend four or more hues?: Yes. Add as many stops as you need — Custom Multi-Color SVG Gradient Generator helps with manual placement.
Are radial multi-color gradients suitable for spotlight effects?: Yes. They work well for orbs, badges, and vignette-style background washes.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B