Back to Free Tools
FREE TOOLS
CSS Gradient to SVG
Convert a supported CSS linear gradient into a complete SVG image.
CSS linear-gradient, SVG width, SVG height
gradient.svg, css-gradient-to-svg.report.json
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter values using the examples, or choose a local file where requested. Follow the displayed supported input shapes and limits.
- Choose Calculate result and inspect the complete result.
- Download result to save the primary file. Where supplied, additional links save source files and the full JSON report. Reset restores examples and clears output.
Examples
CSS linear-gradient: linear-gradient(90deg, #ff0000 0%, #0000ff 100%)
SVG width: 100
SVG height: 100
Limitations
- Same bounded opaque-hex/percent linear-gradient profile,including two-position stops and side/corner directions. Integer dimensions1–4096. Complete SVG uses CSS magic-corner line length and aspect-dependent corner keyword geometry in userSpaceOnUse,explicit encoded-sRGB interpolation and coordinates rounded to10 decimal places. No scripts,external resources,radial/repeating gradients or color-profile conversion. Supported legacy opaque-hex CSS interpolation was observed in local Chromium153;this is not a universal browser/pixel-equivalence claim. Shared input/output limits apply.
- Text fields are limited to100,000 UTF16 units each and400,000 combined UTF8 bytes; file fields have their own displayed limits. Combined output is at most4MiB. Processing stops after30 seconds; tool-specific bounds may be tighter.
- Generated source is a downloadable result and is not executed here. Inspection does not establish remote behavior, trust or standards certification.
Related tools
No items found.