SVG Gradient Extractor to CSS
Extract linear and radial SVG gradients with coordinates, spread methods, and stop details. Visualize color bands and export approximate, usable CSS gradients with explicit compatibility warnings.
1 SVG with gradients
Local href resolution2 Gradient definitions
Resolved values + stops3 Approximate CSS
Warnings included as comments4 Original SVG
Safe image previewYour file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Move SVG color definitions into CSS with the tradeoffs made visible. The extractor resolves local gradient inheritance chains, applies SVG defaults, inspects every stop, and flags geometry, color, or rendering behavior that CSS cannot reproduce faithfully.
- Paste or upload SVGLoad any valid SVG containing linearGradient or radialGradient definitions, including local href or xlink:href inheritance.
- Inspect definitions and stopsReview IDs, units, coordinates, spread methods, offsets, colors, and opacity values alongside generated color bands.
- Export approximate CSSCopy or download the generated rules. Read inline warnings for unsupported transforms, spread behavior, currentColor, focal points, or unresolved definitions.
Good to know
Frequently asked questions
Are missing SVG coordinates handled?
Yes. SVG defaults are applied, including x1/y1 at 0%, x2/y2 at 100% for linear gradients and a centered 50% radius for radial gradients. The resolved values appear in each definition.
What happens with gradient href inheritance?
Local href and xlink:href chains are followed for missing attributes and stops. Missing targets, external references, unsupported reference types, and cycles produce warnings and prevent a misleading CSS rule from being emitted for that gradient.
Why is the CSS described as approximate?
SVG and CSS use different gradient geometry. Stop colors and offsets can transfer directly, but user-space scaling, non-default radii, focal points, gradientTransform, and repeat or reflect spread methods may not have an equivalent in a single CSS background declaration.
How are currentColor and opacity exported?
currentColor remains currentColor so the CSS rule follows its own element’s text color, with a warning explaining the dependency. Partial stop opacity uses CSS color-mix with transparency. An inherited stop value that cannot be resolved locally is flagged instead of guessed.