How to build your gradient
The tool works two ways, chosen with the buttons at the top. It opens on apply over my images, with the upload area ready: drag one or several photos in — JPG, PNG, WEBP, GIF and BMP are all accepted — and the gradient is drawn on top of each one. With more than one photo loaded, tabs named after the files appear above the preview so you can switch between them. Under the second button, create a background, you do not upload anything: you pick the colors, the gradient type and the size, and the image is generated on the spot.
The gradient has four type options. Linear runs the transition in a straight line, with the angle set by the slider following the same convention as CSS, where 0 degrees points up. Radial starts at the center and spreads outward in a circle. Conic spins the colors around the center point, producing the fan effect used in modern backgrounds. None switches the gradient off: over your photos, the image passes through untouched and only picks up the finishes; in create-a-background mode, the first color becomes a solid fill. The colors sit just below: each row has a color picker, a position control in percent and a button to remove it. You can use anywhere from two to six color stops, and the add color button inserts a new one between the existing ones. If you would rather start from something ready-made, the palette grid offers twelve tested combinations, and the random gradient button rolls fresh colors and an angle on every click.
The six textures are applied on top of the gradient and their strength is adjustable. Film grain adds monochrome grain: it varies only the brightness of the pixels, leaving color alone, and it is the go-to fix for the stripes that show up on smooth gradients. Color noise does the opposite — it varies only the color and keeps brightness intact, giving you the look of a photo shot at high ISO. Lines draws diagonal strokes and Dots creates an even grid, both useful for patterned graphic backgrounds. Paper combines soft grain with a slight darkening at the edges, mimicking printed stock. Separate from the textures sit two finishes. The vignette darkens all four edges progressively, drawing the eye to the center. The edge gradient does the same on one side only — top, bottom, left or right — with four types: darken to receive light text, lighten for dark text, use the first gradient color, or fade the edge out to transparent. The reach and strength controls set how far the band travels and how heavily it lands. Both are applied last, after everything else, so they behave identically in either mode and are unaffected by the blend mode.
In create-a-background mode, choose one of the six ready-made sizes — Full HD, square, story, thumbnail, Open Graph or wallpaper — or type a width and height into the custom fields, up to 6000 px per side. The CSS code block shows the declaration matching your current gradient, and the button copies it all to your clipboard, ready to paste into your stylesheet. Finally, pick PNG, JPG or WEBP and download the image; in overlay mode with several photos, the download all button hands you the batch as a single .zip file.
Frequently asked questions
Are the images I upload stored anywhere?
No. The gradient is drawn in your browser, and the images used in overlay mode never travel over the internet. Nothing is saved on a server.
Do I need to upload an image to use the tool?
No. In create-a-background mode you only pick the colors and the size, and the file is generated straight away. Uploading images is only needed for overlay mode, where the gradient is drawn on top of your own photos.
What is the difference between downloading the image and copying the CSS?
The CSS renders the gradient live in the browser of whoever visits your site, with no file to download — it is the lightest option, costs zero bandwidth, and it is ideal for section backgrounds and buttons. The PNG or JPG becomes necessary when the destination cannot interpret CSS, such as a story cover, a video thumbnail, a presentation slide or a desktop wallpaper. Worth remembering: the texture only exists in the exported image, because CSS gradients have no grain.
Which size should I use for each social network or purpose?
The presets cover the most common cases: 1080×1080 for a square Instagram or Facebook post, 1080×1920 for stories and Reels, 1280×720 for a YouTube thumbnail, 1200×630 for the Open Graph share image that shows up on WhatsApp and LinkedIn, 1920×1080 for slides, and 2560×1440 for wallpaper. If you need another measurement, type the width and height into the custom fields, up to 6000 px per side.
What is film grain on a gradient actually for?
Smooth gradients on 8-bit displays tend to show visible stripes of color, a defect known as banding, and it gets worse the closer the two colors are. A light layer of grain between 20% and 40% breaks those stripes up and makes the transition read as continuous. On top of that, grain gives the print-like finish that has become common in brand identity and project covers.
How do I lay a gradient over a photo without wiping out what is in it?
Choose overlay mode and start with the opacity between 40% and 60%. The blend modes change the result dramatically: multiply darkens and works well for placing light text on top, screen lightens, and color tints the photo while keeping its original contrast — that is the mode that preserves the most detail. For covers with a headline, a dark gradient set to multiply along the bottom keeps the text readable without hiding the image.
Can I use only the texture or the vignette, with no gradient at all?
Yes. Choose None in the first option, gradient type. Over your photos, the image passes through untouched and only picks up whatever you switch on afterwards — film grain, vignette or edge gradient — which makes the tool useful for giving a photo a filmic finish without altering its colors. In create-a-background mode, None uses the first color as a solid fill, handy for generating a flat color with grain.
What is the difference between film grain and color noise?
Both scatter random variation across the pixels, but along opposite axes. Film grain changes brightness only and leaves color untouched, reproducing photographic grain — it is the one that breaks up visible banding on smooth gradients. Color noise changes color only and keeps brightness intact, producing colored speckles similar to a camera shooting at high ISO. In practice: reach for film grain as a finish and to fix banding, and for color noise when you want the look of analogue film or an old screen.
What is the vignette for, and how strong should it be?
The vignette darkens the edges progressively and pushes attention toward the center of the image — a classic device in photography and on video covers, where a face or a product has to compete with the background. Between 30% and 50% the effect is subtle and goes unnoticed, which is usually what you want; above 70% it becomes obvious and takes on a dramatic tone. Because the vignette is drawn last, after the gradient, the blend mode you chose has no bearing on it.
How do I darken just the bottom of a photo to place a headline?
Switch on the edge gradient and choose the edge on the side where the text will sit, leaving the type set to darken. The default is the left, which covers the most common banner layout of a headline on the left and imagery on the right; for a video cover, with the title along the bottom, switch to the bottom edge. A reach between 35% and 50% with the strength around 75% gives white text enough contrast without hiding the subject of the photo.
Can I apply the same gradient to several photos at once?
Yes. In overlay mode, upload as many images as you like: the same colors, texture, opacity and blend mode are applied to all of them, and the .zip download hands you the whole batch. It is the fastest route to a consistent set of blog covers or channel thumbnails.