Gradients

Linear, radial, and repeating gradients all round-trip natively.

CSS gradients convert to native SVG <linearGradient> and <radialGradient> elements. Stop colors, positions, and angles are emitted in pixels — there's no floating-point approximation in the output, and the gradient stays correct under any zoom level because the SVG viewBox handles proportional scaling.

Three swatches showing a linear, radial, and repeating-linear gradient — all converted to native SVG gradients. — Linear, radial, and repeating gradients — captured from CSS into native SVG.

What works without caveats: angle-based and keyword-based linear gradients (linear-gradient(135deg, ...), linear-gradient(to right top, ...)); radial gradients with circle and ellipse shapes, sizing keywords (closest-side / closest-corner / farthest-side / farthest-corner), and offset centres (at <position>); both repeating-* variants (spreadMethod="repeat"); hint stops and double-position stops; gradients applied via background-clip: text.

The exceptions

conic-gradient — no SVG equivalent in <img>-rendered SVG. The layer is skipped and a warning is logged.
Non-sRGB interpolation. CSS Color Module 5 lets you pick alternate interpolation spaces (linear-gradient(in oklch, ...)); Domotion samples the resolved gradient at fixed positions and emits sRGB stops. The output is visually close but not identical for OKLCH-interpolated gradients with widely-separated colors.

Examples

Each of these captures cleanly:

/* Diagonal accent */
background: linear-gradient(135deg, #79b8ff 0%, #d2a8ff 100%);

/* Gradient text */
background: linear-gradient(90deg, #79b8ff, #56d364);
-webkit-background-clip: text;
color: transparent;

/* Glow */
background: radial-gradient(circle at center, #79b8ff 0%, transparent 70%);

/* Stripes */
background: repeating-linear-gradient(45deg, #1a2029 0px 10px, #21262d 10px 20px);