How do I convert a CSS linear gradient to SVG?

Keep the sample comment or paste linear-gradient(...) and click Convert to SVG.

Are CSS color stops supported?

Hex and rgb-like tokens in the function are copied onto SVG stops. Angle or to right/left/top/bottom is mapped.

No. Only viewBox, so the graphic scales cleanly.

This is that converter — convert and converter queries share this page.

FAQ

Quick answers

How do I convert a CSS linear gradient to SVG?: Keep the sample comment or paste linear-gradient(...) and click Convert to SVG.
Are CSS color stops supported?: Hex and rgb-like tokens in the function are copied onto SVG stops. Angle or to right/left/top/bottom is mapped.
Does the output include width and height on the root?: No. Only viewBox, so the graphic scales cleanly.
Looking for a CSS linear gradient to SVG converter?: This is that converter — convert and converter queries share this page.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B