How do I invert SVG gradient direction?

Paste a gradient SVG and click Invert direction. linearGradient swaps its endpoints; radialGradient swaps focus and center. An existing gradientTransform gets rotate(180) appended. Stops are not rewritten.

Do stop offsets change when I invert direction?

No. Offsets stay. The paint line runs the opposite way, which looks like a reversed fade.

Need to reverse the color list instead?

Open Invert SVG Gradient Colors to reorder stop-color values, or Reverse SVG Gradient Stops to move the stop elements.

Can I invert a radial gradient too?

Yes. Focus (fx, fy) and center (cx, cy) are swapped so the highlight moves.

Invert SVG Gradient Direction Online — Free Tool

FAQ

Quick answers

How do I invert SVG gradient direction?: Paste a gradient SVG and click Invert direction. linearGradient swaps its endpoints; radialGradient swaps focus and center. An existing gradientTransform gets rotate(180) appended. Stops are not rewritten.
Do stop offsets change when I invert direction?: No. Offsets stay. The paint line runs the opposite way, which looks like a reversed fade.
Need to reverse the color list instead?: Open Invert SVG Gradient Colors to reorder stop-color values, or Reverse SVG Gradient Stops to move the stop elements.
Can I invert a radial gradient too?: Yes. Focus (fx, fy) and center (cx, cy) are swapped so the highlight moves.

Invert colors → Reverse stops →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Invert SVG Gradient Direction

Live preview