Make linear and radial colour gradients with up to ten stops, any angle and any size, then download the image or copy the CSS that reproduces it.
background: linear-gradient(to right, #ff5f6d 0%, #ffc371 100%);Everything is drawn in your browser. Settings are remembered on this device; Share setup copies a link that rebuilds them.
Draws a colour blend across a canvas and shows you the CSS at the same time. A linear gradient runs in a direction you choose, either one of the eight compass directions or any angle in degrees, and follows the same rules as CSS so the image and the code agree. A simple centre-out radial is included for quick use; the dedicated radial tool adds shape and position controls. Up to ten colour stops can be placed at any percentage, and the whole thing exports as PNG, JPEG or WebP up to 8000 px on a side.
A 1600 × 900 header background from #FF5F6D at 0% to #FFC371 at 100% at 90° is about 70 KB as PNG and 20 KB as JPEG at quality 92. Add a third stop, #FFFFFF at 50%, and you get a highlight band through the middle. The rainbow preset places seven stops 17% apart to loop red round to red, which is the classic hue-wheel strip. For a phone wallpaper choose the 1080 × 1920 chip and a 160° angle so the blend runs slightly off vertical.
Use it for hero backgrounds, slide backdrops, social graphics, placeholder images and for getting a CSS gradient you can see before you paste it. If you need the gradient to spread from a point rather than along a line, open Radial Gradient Generator. To put a title over the result, send it on to Add Text. For a two-colour tint applied to a photograph rather than a fresh image, Duotone Effect is the tool.
Linear or Radial picks the kind. Direction chips cover the eight compass directions with the CSS corner rule, and the Angle slider accepts anything from 0° (bottom to top) to 360°. Colours lists the stops: click the swatch to pick, type a hex, set the position, remove, add, reverse, or spread them evenly. Presets are starting points that you can edit. Size takes any width and height; the chips cover common screen sizes and Swap turns landscape into portrait.
Why does 'to top right' not look like 45°? CSS aims corner keywords so the middle colour crosses the exact opposite corners, which is only 45° on a square. The tool follows that rule so the image matches the CSS.
How many colours can I use? Up to ten stops. Two or three usually look best; more become bands unless the positions are spread carefully.
PNG or JPEG for a gradient? JPEG is much smaller and smooth gradients compress well, but it can add faint banding in dark areas. Use PNG when the gradient sits behind sharp text or a logo.
Is anything uploaded? No. The gradient is drawn on a canvas in your browser and downloaded from there.