How do I create a linear gradient in SVG?

Paste the SVG and click Apply linear gradient. The tool writes a linearGradient in defs and sets fill="url(#...)" on targets.

What is the difference between linear and radial SVG gradients?

Linear fades along a line between two points. Radial radiates from a center — try Multi-Color SVG Radial Gradient Generator.

Yes. Use SVG Gradient Angle Generator to set an exact degree value for the gradient axis.

Yes. linearGradient is part of the SVG 1.1 spec and is widely supported in browsers and design tools.

FAQ

Quick answers

How do I create a linear gradient in SVG?: Paste the SVG and click Apply linear gradient. The tool writes a linearGradient in defs and sets fill="url(#...)" on targets.
What is the difference between linear and radial SVG gradients?: Linear fades along a line between two points. Radial radiates from a center — try Multi-Color SVG Radial Gradient Generator.
Can I adjust linear gradient direction in the preview?: Yes. Use SVG Gradient Angle Generator to set an exact degree value for the gradient axis.
Will the linear gradient work in all modern browsers?: Yes. linearGradient is part of the SVG 1.1 spec and is widely supported in browsers and design tools.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B