How do I make a multi-color linear SVG gradient?

Paste SVG and click Apply linear multi-color. Stops are placed along the linear axis with distinct hues.

Can I space three or more colors evenly along the line?

Yes. Default spacing distributes stops from 0% to 100%. Custom offsets live on Custom Multi-Color SVG Gradient Generator.

Yes. Apply to text elements or open SVG Text Linear Gradient for text-focused samples.

Yes. One linearGradient id can fill many paths, rects, and text nodes via fill="url(#...)".

FAQ

Quick answers

How do I make a multi-color linear SVG gradient?: Paste SVG and click Apply linear multi-color. Stops are placed along the linear axis with distinct hues.
Can I space three or more colors evenly along the line?: Yes. Default spacing distributes stops from 0% to 100%. Custom offsets live on Custom Multi-Color SVG Gradient Generator.
Does a multi-color linear gradient work on text fills?: Yes. Apply to text elements or open SVG Text Linear Gradient for text-focused samples.
Can I reuse the same multi-color defs on several shapes?: Yes. One linearGradient id can fill many paths, rects, and text nodes via fill="url(#...)".

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B