Why is there a rectangle in the output?

So the snippet renders standalone. An SVG gradient on its own paints nothing until something references it, so a rectangle filled with url(#grad) is included as a worked example — replace it with your own shape.

How does the angle become coordinates?

SVG describes direction as a vector between two points in the shape's bounding box rather than as an angle. The tool converts the angle into that vector, which is why the corner cases come out as edges of the bounding box.

Can I use two of these in one document?

Yes, but rename the id on one of them. Both are emitted with the identifier grad, and duplicate ids in a document mean the second reference resolves to the first definition.

Does it support radial or conic gradients?

No. Only linear gradients are produced here. SVG has a radial gradient element, but this page does not emit it.

How do I fill a multi-path icon with one gradient?

Define the gradient once in the defs block, then point every path at the same identifier with fill set to url(#grad). The rectangle in the snippet is only there to make it render standalone — delete it and the definition stays usable.

SVG Gradient Generator

Stops

Stop 1

Position: 0%

Stop 2

Position: 100%

Angle

90°

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="320" viewBox="0 0 480 320">
  <defs>
    <linearGradient id="grad" x1="0.000" y1="0.500" x2="1.000" y2="0.500">
      <stop offset="0%" stop-color="#3B82F6" />
      <stop offset="100%" stop-color="#EF4444" />
    </linearGradient>
  </defs>
  <rect width="480" height="320" fill="url(#grad)" />
</svg>

You Might Also Need

Canvas Gradient Generator

Generate gradient code for HTML5 canvas

Radial Gradient Generator

Build radial gradients with shape & position

CSS Gradient Animation Generator

Generate animated CSS gradients

Noise & Grain Texture Generator

Add a noise or grain texture to a gradient

The SVG gradient generator writes a complete <linearGradient> element with the right axis coordinates for any angle, plus a rectangle that uses it, so the markup renders on its own.

What is SVG Gradient Generator?

The SVG gradient generator keeps the controls of the CSS builders — a large preview, stops with colour and position sliders, and an angle from zero to three hundred and sixty degrees — but the panel at the bottom holds markup rather than a declaration.
Copy takes the whole element, from the opening svg tag to the closing one.

What the markup contains is the part worth understanding, because SVG does not think about gradients the way CSS does. A gradient in SVG is defined once inside a defs block, given an identifier, and then referenced by other elements through a fill or stroke attribute. So the output here is three things in one: a linearGradient element with an id, one stop per colour carrying an offset percentage and a stop color, and a rectangle filled with a reference to that gradient so the snippet renders as a picture the moment it is saved or pasted into a page.

The more interesting translation is the axis. CSS describes a gradient direction with a single angle; SVG describes it with a vector — an x1, y1 pair saying where the ramp begins and an x2, y2 pair saying where it ends, expressed in fractions of the shape's bounding box. So zero degrees, which in CSS points to the top, becomes a vector running from the bottom edge to the top edge, and ninety degrees becomes one running from the left edge to the right. Each coordinate is written to three decimal places, which is precision past the point of visible difference but keeps the markup stable and diff-friendly when the angle changes.

Stops are written as offset percentages, matching the positions set with the sliders. Only the offset and the colour are emitted, so a stop cannot carry a separate opacity here — SVG expresses that with a stop opacity attribute, which you would add by hand if a fade is needed. The identifier is fixed at grad, which matters as soon as you use the snippet twice: two elements in the same document with the same id are a collision, and the second reference will pick up the first definition. Rename the identifier on one of them.

The output is also a rectangle, and for many uses that is not what you want — an SVG gradient is usually there to fill a shape you already have. The defs block is the part to keep; the rectangle is a demonstration, and replacing its fill with your own path or icon is the expected next step.

Scale is the reason to choose this over a PNG: a gradient defined this way has no resolution, stays smooth at any size and weighs almost nothing, which is what icons, favicons and anything printed need.
The limits are that only a linear gradient is produced, and that the geometry is a bounding-box vector, so the ramp scales with whatever shape references it rather than with the document.
The workflow is one pass: set the colours and positions, choose the angle, copy the svg gradient markup, and keep the linear gradient in svg form wherever it has to scale.
Dropping it into a document takes no conversion — the svg gradient code arrives as a defs block with an identifier and bounding-box coordinates already written, svg gradient stops and all.

How to use SVG Gradient Generator

Set the stop colours and drag their position sliders to place them on the ramp.
Choose the angle — the axis coordinates in the markup follow it.
Copy the entire element from the SVG panel.
Keep the defs block and reference the gradient from your own shape; rename the id if you use it twice.

When to use SVG Gradient Generator vs related tools

Use this when the gradient has to end up as vector artwork — icons, logos, illustrations or anything that must stay sharp at any size. Use the CSS exporter for backgrounds in a stylesheet, or the canvas generator when the gradient is drawn by script. When the same ramp has to be drawn by script rather than declared as markup, the canvas gradient generator is the counterpart; when it only has to exist as a flat file, the CSS gradient to image exporter writes it out as a PNG.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.