Most gradient tools only hand you a line of CSS. This one renders the gradient to a real canvas and lets you download the finished PNG at the exact pixel size you need - a phone wallpaper, a 1920x1080 desktop background, a square social post or a custom dimension. Nothing is uploaded: the image is drawn and saved entirely on your device, so your colors and files stay private.
Free Gradient Generator
Runs entirely in your browser - no upload, no sign-up.
Type
Image size
px
Color stops
Saves a real PNG at 1920×1080 px
What is a gradient generator?
A gradient generator is a tool that blends two or more colors into a smooth gradient and exports it as an image you can download. Pick your colors and stops, choose linear or radial, set the size, and save a PNG for a wallpaper, background, banner or thumbnail. It all runs in your browser.
How to use
- 1Choose linear or radial. Linear blends colors along a straight line at the angle you set; radial spreads them outward from the center as a circle.
- 2Set your colors and stops. Click a swatch to pick a color and drag its slider to move the stop. Add up to 8 stops or remove down to 2, and hit Randomize for a quick idea.
- 3Pick the image size. Tap a preset (desktop, phone, square, social) or type a custom width and height in pixels. The preview updates live.
- 4Download the PNG. Click Download PNG to save the gradient as an image at full resolution, or copy the CSS to reuse the same gradient in code.
Who it's for
- Designers and content creators who need a clean gradient background image for a slide, thumbnail, banner or story without opening Photoshop.
- Phone and desktop users making a custom gradient wallpaper at their screen's exact resolution.
- Developers who want a lightweight gradient PNG placeholder or hero image, plus the matching CSS to reproduce it in code.
- Social media managers exporting on-brand gradient backgrounds sized for posts, stories and cover images.
FAQ
Is this gradient generator free?
Yes - 100% free, no sign-up, no watermarks and no limits. Make and download as many gradient images as you like.
Is anything uploaded to a server?
No. The gradient is drawn and saved entirely in your browser using canvas. No colors, images or usage data are sent anywhere.
What image format does it export?
It exports a PNG, which keeps the gradient perfectly smooth and lossless with no compression artifacts. The file is saved at the full pixel size you set, ready to use as a wallpaper, background or upload.
What size should I make a gradient wallpaper?
Match your screen. Common choices are 1920x1080 for most desktops, 1080x1920 for a phone in portrait, and 1080x1080 for a square social post. You can also enter any custom width and height up to 8000 pixels.
What is the difference between a linear and radial gradient?
A linear gradient blends colors along a straight line at an angle you choose, so the color shifts across the image. A radial gradient starts from a center point and spreads outward in a circle, so the color changes from the middle to the edges.
Can I get the CSS as well as the image?
Yes. Alongside the downloadable PNG, the tool shows the matching background-image CSS. Copy it to reproduce the exact same gradient in a website or app instead of using the image file.
How do color stops work?
Each stop pairs a color with a position from 0% to 100% along the gradient. The blend runs smoothly between neighboring stops. Placing two stops at the same position creates a hard edge instead of a fade, which is handy for stripes or color-block backgrounds.