Free tool
CSS gradient to SVG
Paste a CSS linear-gradient — with or without the background: wrapper — and get a ready-to-use SVG, plus an optional PNG export. Preview updates live.
Paste gradient CSS
Export size
Radial and conic gradients aren't supported yet — linear only.
Paste a gradient on the left to preview it here.
Convert a CSS linear-gradient into a standalone SVG you can use anywhere — design tools, emails, OG images — with live preview, copyable markup, and SVG or PNG download at any size.