SVG Gradient Generator

Writing SVG gradient markup by hand, stop colors, offsets, opacity values, and the coordinate math behind a specific angle, is fiddly enough that most people either avoid gradients entirely or copy one from somewhere else and tweak it blindly. This tool replaces that guesswork with a visual editor: drag color stops directly along a gradient bar, adjust the angle with a slider, and get valid, ready to use linearGradient or radialGradient SVG markup generated automatically underneath.

Linear versus radial: two genuinely different shapes

A linear gradient transitions colors along a straight line at a given angle, useful for a directional wash of color across a shape, a subtle background fade, or a button with a diagonal color shift. A radial gradient instead transitions colors outward from a center point in expanding circles, useful for a glow effect, a spotlight look, or a shape that needs to appear lit from its center. Both are built from the same underlying concept, an ordered list of color stops, each positioned along the gradient and optionally given its own opacity, but the shape that gradient travels through is fundamentally different, which is exactly why picking the right type first matters before fine tuning the stops themselves.

Why SVG gradient angles are more awkward than CSS ones

In CSS, a linear-gradient simply takes an angle in degrees directly. In raw SVG, a linearGradient element has no angle property at all, instead it defines a start point, x1 and y1, and an end point, x2 and y2, as percentages, and the gradient travels along the line connecting them. Converting a simple, intuitive angle like 45 degrees into the correct x1, y1, x2, y2 percentage coordinates involves trigonometry that is easy to get wrong by hand, and mistakes here are why so many hand-written SVG gradients render at an unexpected angle. This tool handles that conversion internally, you interact with a familiar angle slider, and the correct coordinate values are calculated and inserted into the generated markup automatically.

Working with color stops directly on the gradient bar

Every gradient is built from an ordered set of stops, each with a position along the gradient, a color, and an optional opacity. Click anywhere on the gradient bar to add a new stop at that exact position, drag any existing stop's handle left or right to reposition it, and click a stop to select it and edit its exact color, numeric position, and opacity in the panel below. This mirrors how gradient editors work in design tools like Figma and Illustrator, so the interaction should feel familiar even though the output is raw, hand-inspectable SVG markup rather than a proprietary file format.

Using stop opacity for a fade to transparent

A gradient does not have to transition between two solid colors, a stop's opacity can be reduced independently of its color, letting a gradient fade smoothly into full transparency rather than into another visible color. This is a common technique for a decorative shape that needs to fade out at its edges, or an overlay gradient placed on top of a photo or another shape, darkening one edge while leaving the rest fully visible. Reducing the final stop's opacity to zero while keeping its color the same as the previous stop produces a clean fade rather than an abrupt color shift right before the transparency kicks in.

Runs entirely in your browser

Every part of this tool, the live preview, the drag interactions, and the SVG markup generation, runs directly in your browser, nothing is sent to a server. Once you have a gradient you like, our SVG Code Editor is a natural next step to combine it with other shapes or artwork, and our SVG Palette Extractor can pull matching solid colors from an existing logo if you want the gradient's stops to align with an established brand palette, both part of the same SVG & Design Tools collection this tool belongs to.