SVG gradient generator

One gradient, two outputs

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, with offsets clamped to 0–100% and sorted, so the two outputs always render the same picture. Everything is assembled in your browser; nothing is generated on a server.

The agreement is not accidental — it is the point. CSS measures gradient angles from the top, clockwise; SVG has no angle at all, only a line from x1,y1 to x2,y2. The tool converts your CSS-style angle into those coordinates (percentages either side of the centre), so 90° points right in both files and a designer's "45° like the mock-up" means the same thing whichever output you ship. The radial case gets the same treatment: the SVG circle's radius is set to 70.7% — just enough to reach the corners from the centre — matching what CSS radial-gradient(circle) does by default with its farthest-corner sizing.

Type, angle and stops

Linear runs the colours along a line; Angle (0–360°, in 5° steps) sets its direction using the CSS convention — 0° points up, 90° right, 180° down. Radial ignores the angle and radiates from the centre outward. The stops are deliberately simple: a start colour at 0%, an end colour at 100%, and an optional middle stop pinned at 50%. That covers the two workhorse cases — a straight two-colour ramp, and a three-colour ramp where the middle stop either bridges two saturated hues or bends the transition toward one end. The output is plain markup and plain CSS, so a fourth stop or a moved offset is a one-line edit in either file afterwards.

CSS gradient or SVG gradient — which to ship

For a page background, a hero section or a card, the CSS declaration is the right tool: it costs no request, repaints at any element size, and can live 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, a favicon background, anywhere the gradient has to travel inside a self-contained file. Because SVG gradients are part of the document that carries them, they also survive contexts that strip stylesheets.

One practical difference: an SVG gradient rectangle has a fixed aspect ratio (800 × 480 here), so used as an <img> it crops or letterboxes like any image, while the CSS gradient re-derives itself for every box it paints. When a raster copy is the actual deliverable — a 1200 × 630 social card, say — run the SVG through SVG to PNG at the exact pixel size rather than screenshotting a div.

Putting the gradient on your own shapes

The rectangle is just a demo surface. To use the gradient on real artwork, copy the gradient element out of <defs> into your own file and reference it from any shape with fill="url(#g)" — a logo path, a headline from Text to Path, an icon. Strokes take it too: stroke="url(#g)" paints an outline with the ramp. Two things to watch when transplanting: ids are global to a page, so rename g to something unlikely to collide if the SVG is inlined next to others; and a linear gradient's default units are relative to the bounding box of each shape that uses it, so the ramp spans each shape individually — usually what you want, occasionally a surprise when two shapes were meant to share one sweep. For quick experiments, the editor will open the output directly, and the blob generator has a two-colour gradient fill built in if a blob is the shape you were heading for anyway.

Choosing colours that blend well

Gradient interpolation is a straight line through RGB, and some pairs of colours have unfortunate territory between them: saturated complements — orange to blue, red to green — pass through grey, and the middle of the ramp goes dull. That is what the middle stop is for. Set it to a deliberately saturated colour on the route between the two ends and the ramp detours around the grey zone. The other classic failure is banding: two close colours stretched over a large area run out of intermediate shades, and the steps become visible. Widen the colour distance, shorten the run, or again use the middle stop to redistribute where the change happens. Subtle two-stop ramps between neighbouring hues — blue to violet, the tool's defaults — need none of this care, which is why they are everywhere.

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 the 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.
• Two gradients on one page, both painted with the first one's colours. Every export uses the id g, and ids are page-global. Rename the id and its url(#g) reference in one of the files.
• The gradient needs to fade to transparent. The colour pickers produce opaque colours. Edit the output: give a stop stop-opacity="0" in the SVG, or swap the CSS colour for an 8-digit hex or rgb() with alpha.