How do I set the angle of an SVG linear gradient?

Paste SVG, enter Angle (default 90), then click Apply angle. The gradient axis rotates to that bearing.

What angle values produce a top-to-bottom fade?

90° runs top to bottom in the default coordinate system. 0° is left-to-right; 180° is bottom-to-top.

Yes. The Angle field accepts any number — decimals work for fine-tuned design specs.

No. This page targets linearGradient vectors. Use Multi-Color SVG Radial Gradient Generator for radial fills.

FAQ

Quick answers

How do I set the angle of an SVG linear gradient?: Paste SVG, enter Angle (default 90), then click Apply angle. The gradient axis rotates to that bearing.
What angle values produce a top-to-bottom fade?: 90° runs top to bottom in the default coordinate system. 0° is left-to-right; 180° is bottom-to-top.
Can I type a custom degree value for the gradient?: Yes. The Angle field accepts any number — decimals work for fine-tuned design specs.
Does gradient angle affect radial gradients on this page?: No. This page targets linearGradient vectors. Use Multi-Color SVG Radial Gradient Generator for radial fills.

Source

Angle

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B