SVG gradientTransform
gradientTransform lets you rotate or reposition a gradient's angle and origin without redefining its color stops or touching the filled shape.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why gradientTransform Is Useful
Rather than recalculating a linearGradient's x1/y1/x2/y2 coordinates to change its angle, `gradientTransform="rotate(45)"` applied to the gradient element itself rotates the gradient's effective angle directly — much simpler than manually recomputing coordinate geometry for a new angle.
- gradientTransform rotates/repositions a gradient without recalculating coordinates
- Far simpler than manually recomputing x1/y1/x2/y2 for a new angle
- Works identically for both linearGradient and radialGradient elements
Reusing One Gradient Definition Multiple Ways
Define a single gradient once, then apply different `gradientTransform` values via separate `<use>`-referenced instances (or by defining the transform per usage context) to get multiple gradient orientations from one base color-stop definition — avoiding duplicated gradient definitions that differ only in angle.
- One base gradient definition can serve multiple different orientations
- Different gradientTransform values per instance avoid duplicated definitions
- Keeps color-stop maintenance centralized to a single source gradient
Frequently Asked Questions
Does gradientTransform affect the shape the gradient is filling?
No — it only transforms the gradient's own internal coordinate space and angle; the filled shape's geometry remains completely unaffected by the gradient's transform.
Can I animate gradientTransform for a rotating gradient effect?
Yes — animating the rotate() value within gradientTransform via CSS or SMIL creates a continuously rotating gradient effect, a technique sometimes used for loading spinners or attention-drawing highlight effects.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG