Home / Image Tools / Online Linear Gradient Image Generator
Free online tool

Online Linear Gradient Image Generator

Create a two-colour linear gradient PNG. Choose dimensions, angle, scale and optional endpoint transparency; generate locally and download.

Start using

Online Linear Gradient Image Generator

Create a two-colour linear gradient PNG. Choose dimensions, angle, scale and optional endpoint transparency; generate locally and download.

Direction is measured clockwise from the right: 0° runs left to right, 90° top to bottom, 180° right to left and 270° bottom to top. The default 135° runs from the upper right toward the lower left. The transition is centred on the canvas. At 100% scale, its span covers the rectangle’s projection onto that direction; on non-square canvases it is not simply the line between opposite corners. At 200%, the transition occupies the middle half of that span, with the first colour on one outer side and the second on the other. At 50%, the image shows only the middle part of a longer transition, so neither endpoint colour need be reached. No repetition occurs.

With transparency enabled, 25% transparency produces alpha 0.75 and 100% produces alpha 0. The tool creates exactly two color stops at positions 0 and 1; there are no extra stops, repeating mode, color-space selector, dithering option, texture or uploaded image.

1 ≤ W,H ≤ 10,000 px; W × H ≤ 24,000,000 px
−360° ≤ θ ≤ 360°; 1% ≤ s ≤ 500%
0% → α 1; 25% → α 0.75; 100% → α 0
1200 × 630 px; θ = 135°; s = 100%
P₀ (1057.5, −142.5) → P₁ (142.5, 772.5)

Processing takes place locally in your browser.