SVGFlow
Open editor

SVG gradient generator

Generate a linear or radial gradient and take it two ways at once: as standalone SVG markup, or as the matching CSS background-image declaration. Both are built from the same stops, so they render the same picture.

Runs entirely in your browser — nothing is uploaded, no account needed.

Preview90°
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480" width="800" height="480">
  <defs>
    <linearGradient id="g" x1="0%" y1="50%" x2="100%" y2="50%">
      <stop offset="0%" stop-color="#2f6df6"/>
      <stop offset="100%" stop-color="#7b4df6"/>
    </linearGradient>
  </defs>
  <rect width="800" height="480" fill="url(#g)"/>
</svg>
CSS
background-image: linear-gradient(90deg, #2f6df6 0%, #7b4df6 100%);
Type
Angle — 90°

How it works

Pick a type, an angle and your stops, and the tool writes the same gradient twice: once as a standalone SVG — a <linearGradient> or <radialGradient> in <defs>, referenced by a full-bleed <rect> — and once as the CSS background-image declaration. Both are generated from the same stop list, and the angle is converted between the two conventions (CSS measures from the top, SVG wants x1/y1/x2/y2 coordinates), so the two outputs always render the same picture.

To use the gradient on your own artwork rather than a rectangle, copy the gradient element out of <defs> into your file and reference it from any shape with fill="url(#g)" — or take the SVG into the editor and build on it there.

When to use which output

For a page background, a hero section or a card, the CSS declaration is the right tool — it costs no request, repaints at any size, and can sit in a custom property for theming. The SVG version earns its keep everywhere CSS cannot follow: an <img> or social-preview asset, an email template, a fill inside another SVG, or a gradient that has to travel inside a self-contained file. Because SVG gradients live in the file, they also survive contexts that strip styles.

Common problems

  • Visible banding. Gradients between two close colours over a large area run out of intermediate shades. Widen the colour distance, shorten the run, or add a middle stop to bend the interpolation.
  • The SVG and CSS angles disagree in your own code. CSS 0° points up and rotates clockwise; raw SVG coordinates have no angle at all. This page does the conversion for you — if you edit the output by hand, change the CSS angle and the SVG x1/y1/x2/y2 together.
  • Muddy middles between saturated colours. Interpolating between complementary colours passes through grey. Add a middle stop that keeps saturation — this is what the third stop is for.

Notes

  • The angle follows the CSS convention — 0° points up, 90° points right — and is converted to SVG x1/y1/x2/y2 coordinates, so the SVG and CSS outputs always agree.
  • The radial radius is set to reach the corners from the centre, matching what CSS radial-gradient(circle) does by default.
  • To reuse the gradient on your own shape, copy the <linearGradient> out of <defs> and reference it with fill="url(#g)".

Related tools