Gradient Background Generator

Soft, colorful backgrounds in one click.

Loading…

Mesh gradients blend several colors into a soft, modern background. Press “Random” for a new combination or set each color yourself, adjust the softness and add a light film grain that prevents banding on big screens. Download the background as a PNG for desktops, 4K screens, phones or social posts, or copy the CSS to use it on a website.

How to create a gradient background

Step 1
Press “Random” or choose the colors.
Step 2
Adjust the softness and pick a size.
Step 3
Download the PNG or copy the CSS.

Why use PhotoTools

Endless ideas

A new combination with every click.

Wallpaper sizes

Full HD, 4K, phone and square.

No banding

Optional film grain for smooth gradients.

Supported formats

Output

Frequently asked questions

What is a mesh gradient?

A background where several colors spread from different points and blend softly, instead of a straight line from one color to another.

Is the CSS the same as the image?

Very close: the CSS layers radial gradients over the base color. The PNG adds the optional grain.

Is it free?

Yes. Browser tools on PhotoTools are free, unlimited and work without an account.

Are my images uploaded to a server?

No. This tool runs entirely in your browser using WebAssembly. Your images never leave your device, and nothing is stored.

CSS Gradient GeneratorDesign gradients and copy the CSS in seconds.Pattern GeneratorSeamless patterns for websites, wallpapers and designs.Gradient from ImageTurn the colors of a photo into a gradient.Color Palette GeneratorBuild a harmonious color scheme from one color.Image Color PickerFind the exact color of any pixel in a picture.Color Palette from ImageTurn a photo into a color palette.