How do I reverse SVG gradient stops?

Click Reverse stops. The last node moves to the first slot, taking stop-color, stop-opacity, and extra attributes with it.

What happens to uneven offsets like 28%?

The stop element moves. Offsets are then remapped to the original slots so a 28% stop lands in the complementary position.

Use Invert SVG Gradient Colors. That rewrites stop-color only.

No. The vector and gradientTransform stay. Combine with Invert SVG Gradient Direction if you need geometry.

FAQ

Quick answers

How do I reverse SVG gradient stops?: Click Reverse stops. The last <stop> node moves to the first slot, taking stop-color, stop-opacity, and extra attributes with it.
What happens to uneven offsets like 28%?: The stop element moves. Offsets are then remapped to the original slots so a 28% stop lands in the complementary position.
Want to keep percentages and only move colors?: Use Invert SVG Gradient Colors. That rewrites stop-color only.
Does reversing stops invert x1/x2?: No. The vector and gradientTransform stay. Combine with Invert SVG Gradient Direction if you need geometry.

Invert colors → Invert direction →

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B