How to use Gradient Image
- Set Width and Height in pixels (1–8000; the default is 1920 × 1080).
- Pick the Start colour and End colour. Tick Add a middle colour to set a third colour that sits exactly halfway.
- Choose Type: Linear or Radial. For Linear, set the Angle (0–360°, default 135°).
- The preview updates as you change settings. Download the PNG, or copy the line under The same gradient in CSS.
What it does and when to use it
Gradients are a popular background for slides, YouTube end screens, blog headers, social posts, phone wallpapers and app splash screens. Design apps can make them, but this tool gives you a file at an exact size in seconds, together with the CSS to reproduce it on a web page.
Typical sizes are 1920 × 1080 for slides and video, 1200 × 630 for link previews, 1080 × 1920 for stories and phone wallpapers, and 1500 × 500 for an X header. Put text on top with Image Text Overlay. For a plain fill, use Solid Color Image. For more CSS gradient options, such as many colour stops, the CSS Gradient Generator helps.
How it works
For every pixel, the tool works out how far along the gradient line it lies, as a number from 0 to 1, and mixes the two nearest colour stops in that proportion. The linear line has the CSS length, so the very corners reach the first and last colour. The radial version uses the distance from the centre divided by the distance to a corner. The image is encoded as PNG in your browser; nothing is uploaded.
Worked examples
Outputs from the tool’s own function.
A link-preview background. Width 1200, Height 630, default colours: a 1200 × 630 px PNG from indigo #6366f1 at the top left to pink #ec4899 at the bottom right, with the CSS background: linear-gradient(135deg, #6366f1, #ec4899);.
Three colours, left to right. Add a middle colour (default amber #f59e0b) and set Angle 90: the CSS becomes linear-gradient(90deg, #6366f1, #f59e0b, #ec4899).
A spotlight background. Type Radial, Start #ffffff, End #0f172a: white in the centre fading to near-black at the corners, radial-gradient(circle, #ffffff, #0f172a).
Limits and tips
- Stops are evenly spaced; you cannot move the middle colour off centre here.
- To shrink the PNG, convert it to WebP with the Image Converter.
Frequently asked questions
Which way does the angle point?
Where does a radial gradient end?
Why do I see faint bands in a large, subtle gradient?
What is the largest image I can make?
Should I use the PNG or the CSS?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.