How do I use the CSS to SVG gradient generator?

Paste linear-gradient() with two or more colors, then click Generate SVG.

Are stops spaced evenly?

Yes, unless you later edit offsets in Source.

Yes. The angle is mapped onto the SVG vector.

It writes a clean preview rect so the CSS fade is obvious. Paste your own CSS anytime.

FAQ

Quick answers

How do I use the CSS to SVG gradient generator?: Paste linear-gradient() with two or more colors, then click Generate SVG.
Are stops spaced evenly?: Yes, unless you later edit offsets in Source.
Can I generate from 45deg CSS?: Yes. The angle is mapped onto the SVG vector.
Does the generator keep my original SVG artwork?: It writes a clean preview rect so the CSS fade is obvious. Paste your own CSS anytime.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B