colour tool
CSS gradient generator
Set two to five colour stops, choose linear, radial or conic, turn the angle, and this CSS gradient generator writes the background rule for you. The same gradient can be saved as a PNG at any size up to 8000 pixels a side, with optional noise to hide banding.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Pick the type
Click Linear, Radial or Conic. The preview repaints at once.
- 2
Set the colour stops
Each stop has a swatch, a hex field and a position in percent. Add a stop to drop one into the widest gap, up to five, or remove one down to two.
- 3
Turn the angle
Drag the angle slider for linear gradients, or the start angle for conic ones.
- 4
Copy or download
Copy the CSS, or choose a preset size or type a width and height and press Download PNG. The band note tells you whether to tick the noise option first.
The three gradient types
A linear gradient runs along a line at an angle, where 0 degrees points up and 90 points right. A radial gradient spreads outwards from the centre; here it is a circle that reaches the farthest corner, so the last stop lands exactly in the corners. A conic gradient sweeps around the centre like the hand of a clock, starting at the angle you set, which is how pie chart style backgrounds and colour wheels are drawn.
How the PNG matches the CSS
The image is drawn on a canvas with the same geometry the CSS specification defines. For a linear gradient the line length is the width times the sine of the angle plus the height times the cosine, so the first and last stops touch the corners exactly as they do in a browser. Stops are sorted by position before both the CSS and the PNG are written, so they always agree.
Banding, and what the noise option does
Each channel of an 8 bit PNG has 256 levels. Stretch a soft blue to a slightly darker blue across a 1920 pixel banner and each level covers many pixels, so the eye sees steps. The band note under the size fields works out the widest band your settings will produce. The noise option adds a random nudge of one or two levels to every pixel, which breaks the steps up so the eye reads a smooth ramp, at the cost of a slightly larger file.
Gradients in a video or a slide
The video builder has 39 animated backgrounds, 7 of them gradients, and they take their colours from the theme, so a gradient there follows the brand colours rather than a file. A PNG from this page suits places that take an image: a slide background picture, a flyer photo slot or a social banner. The CSS suits a website or an email header.
Limits worth knowing
The PNG is 8 bit, so long subtle gradients can band; add the noise or use the CSS. Images are capped at 8000 pixels a side because a canvas larger than that can exhaust a phone's memory. Nothing leaves this page: the gradient is drawn in your browser, nothing is uploaded and nothing is stored, ever.
Limits
- The PNG is 8 bit per channel, so a long, subtle gradient can show visible bands. Tick the noise option or use the CSS, which the browser renders smoothly.
- The PNG is capped at 8000 pixels a side.
- Radial gradients are always a circle reaching the farthest corner, centred.
What it does not do
- It does not make mesh gradients or blend more than one gradient layer.
- It does not animate the gradient.
- It does not write colour interpolation in OKLCH; the CSS uses the default sRGB blending so it matches the PNG.
Questions people ask
How do I make a gradient with a hard edge between colours?
Give two neighbouring stops the same position. For example, a blue stop at 50% followed by an orange stop at 50% switches colour instantly with no blend, which makes stripes and split backgrounds. The PNG reproduces the same hard edge, because the canvas and the CSS both jump between stops that share a position.
Do all browsers support conic gradients?
Every current version of Chrome, Edge, Firefox and Safari supports conic-gradient(), and has done so since 2021 or earlier. Very old browsers ignore the whole declaration, so put a plain background colour on the line before it as a fallback. The PNG download avoids the question entirely, since any browser or app can show an image.
Why does my gradient look muddy in the middle?
Blending two opposite colours, such as blue and orange, in sRGB passes through a greyish midpoint, because the red, green and blue values average out. Add a third stop in the middle with a cleaner colour, such as a pink or a purple, and the muddy zone disappears. The colour mixer shows the midpoint of any pair in three ways.
What size should a gradient background image be?
Match the largest size it will be shown at. A full HD slide or video frame is 1920 by 1080, a square social post is 1080 by 1080, and a story is 1080 by 1920; the presets cover those. Gradients compress very well as PNG, so even a large one is usually small, unless the noise option is ticked.
Can I use the gradient as a flyer background?
Yes, as an image. Download the PNG at the flyer canvas size, such as 1240 by 1754 for A4 portrait, and place it in an image slot. Flyer themes set their own backgrounds from the palette, so for a background that follows your brand colours, set those colours in the brand kit and pick the Your brand group.
Put a gradient behind a video
Take what you made here into videos.
Create a video with OneCraftMore tools like this
- Colour mixer onlineColour mixer online: mix two colours at any ratio and see the result as an RGB average, an OKLCH paint-like mix and a CMYK approximation, with hex codes.
- Colour palette generatorColour palette generator: pick one seed colour and get monochrome, analogous, triadic and split palettes with hex, RGB, HSL and a WCAG text check.
- Check image size onlineCheck image size online: width, height, aspect ratio, file size, format and colour depth for up to 20 images, plus which flyer sizes each one fills.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- SVG to PNGRasterise an SVG at any size in your browser. It reads the declared width, height and viewBox, and warns about the fonts and links that will not survive.
Written and checked by the OneCraft team. Last checked .