What element does the snippet expect?

A canvas with the identifier gradient. Either give yours that id or change the first line, which is the only place the element is looked up.

Why are the coordinates specific numbers rather than percentages?

The canvas API takes absolute pixel positions for the gradient axis rather than a direction. The tool computes them from the angle and the assumed canvas size so the ramp spans the whole box.

How are the stop positions converted?

Canvas expects values between zero and one, so each percentage from the sliders is divided by a hundred and written to two decimal places. Passing the percentage directly is a common mistake.

Can it draw a radial gradient?

No. Only the linear form is emitted. The canvas API does offer radial gradients, but this page does not generate that code.

What happens if the canvas is a different size?

The code still runs, but the four axis coordinates were computed for a 480 by 320 box, so a differently sized canvas gets a ramp that no longer spans it. Recreate the gradient inside your redraw with the new width and height; the normalised stop values carry over unchanged.

Canvas Gradient Generator

Stops

Stop 1

Position: 0%

Stop 2

Position: 100%

Angle

90°

Canvas

const canvas = document.getElementById('gradient');
const ctx = canvas.getContext('2d');
const g = ctx.createLinearGradient(0, 160, 480, 160);
g.addColorStop(0.00, '#3B82F6');
g.addColorStop(1.00, '#EF4444');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 480, 320);

You Might Also Need

SVG Gradient Generator

Generate SVG <linearGradient> markup

CSS-in-JS Color Object Generator

Generate a colors object for styled-components

Radial Gradient Generator

Build radial gradients with shape & position

Color JSON Generator

Generate JSON for any color

The canvas gradient generator produces a ready-to-run JavaScript snippet that draws your gradient on a canvas, with the axis coordinates already calculated for the chosen angle.

What is Canvas Gradient Generator?

The canvas gradient generator shares its controls with the CSS builders — stops with positions, an angle slider, a live preview — and changes only what the bottom panel contains.
Instead of CSS or markup, the panel holds six lines of JavaScript that draw the gradient onto a canvas element, with a copy button for the block.

The snippet follows the same order a person would write by hand. It is the html5 canvas gradient recipe in full. First it looks up an element by identifier, which is assumed to be gradient, then gets the two-dimensional drawing context. Then it creates the gradient object with four coordinates, adds one colour stop per entry in the ramp, assigns the result as the fill style, and finally fills a rectangle covering the canvas. Running it produces exactly the preview shown above it.

The interesting part is the pair of coordinate systems the tool has to reconcile. CSS expresses a gradient direction as an angle, while the canvas API wants two absolute points in pixel space — the start of the ramp and the end of it. The tool calculates those four numbers from the angle and the canvas size, centring the axis on the canvas and stretching it just far enough that the ramp spans the whole box, which is the same geometry a browser uses when it paints the CSS version. For the default ninety degrees on a four hundred and eighty by three hundred and twenty canvas, that resolves to a horizontal axis running from the left edge to the right edge at mid-height.

Stop positions are converted on the way out: canvas expects a number between zero and one, so each percentage from the slider is divided by a hundred and written to two decimal places.
That conversion is the easiest part to get wrong by hand — passing fifty rather than half a value does not throw, it simply crams both stops at one end.

Two assumptions are baked into the output and are worth checking before running it. The element is looked up with the identifier gradient, so either name your canvas that or rename the lookup. And the fill rectangle covers four hundred and eighty by three hundred and twenty pixels, matching the size the coordinates were computed for. On a canvas of a different size the code still runs, but the axis will no longer span the full box — the numbers need recalculating, which is what the angle slider is doing for you.

Where this is useful is anywhere the gradient has to be drawn by script rather than declared in a stylesheet — every case of a canvas linear gradient javascript is the answer instead: charts that paint their own backgrounds, image processing that composites a tint, generative art, or a canvas whose size is only known at runtime. In those cases a CSS declaration is not an option at all, and hand-building the gradient object with the right coordinates and normalised stops is precisely the fiddly part this removes. The limits are that it is a linear gradient only, that there is no support for radial or conic ramps in the canvas API here, and that the snippet draws once — animating it is a separate exercise in redrawing on each frame. As canvas gradient code to draw gradient on canvas without computing the axis yourself, it covers the part that is easiest to get wrong.

How to use Canvas Gradient Generator

Set the stops and their positions, then choose the angle.
Copy the JavaScript block from the Canvas panel.
Give your canvas element the id gradient, or rename the lookup in the first line to match.
Adjust the fill rectangle if your canvas is not 480 by 320.

When to use Canvas Gradient Generator vs related tools

Use this when a gradient has to be drawn in script — charts, compositing, generative work or a canvas sized at runtime. Use the CSS exporter when a stylesheet can carry the gradient, or the SVG generator when the output should be vector artwork. When the ramp should end up as a picture rather than a drawing routine, the CSS gradient to image exporter saves it as a 1200 by 800 PNG, and when it should stay vector, the SVG gradient generator writes the markup instead.

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.