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.