FOCUSED PNG TOOL · FREE ONLINE IMAGE TOOLS

PNG Gradient Generator

Create horizontal or vertical two-color PNG gradients at custom dimensions and opacity. Start from presets, compare backgrounds and export original-size gradient artwork.

Browser processingOriginal-size exportsPreview + staged edits

1. Open an image

Choose file

PNG, JPG or WebP · up to 20 MiB, 8 million pixels. Drop one file anywhere in the workspace.

No image loaded.

2. PNG Gradient Generator

Task / extra operation

Output channelsOutput width · pxOutput height · pxImage fittingCanvas backgroundPalette harmonyGradient / mixing colors · 2–32 hex colorsColorSecond / replacement colorAmount / threshold · %Color tolerance · %Match-edge softness · %Edge radius · pixelsLevels per RGB channelCell / band size · pixelsRepeatable seedGradient direction

Generator canvas size

Width · pixelsHeight · pixels

Preview starts from the current working image. Keep an edit to chain operations. Original upload remains available with Reset.

Choose dimensions, two colors, direction and opacity, then Preview. Export is a raster PNG, not a CSS gradient. Transparent gradients use the selected uniform opacity.

3. Preview & export

Choose a generator and preview, or load an image for effects.

ShowPreview backgroundClick the working image to pick a color.

Working image · click to pick

Your image will appear here.

Operation preview

Preview an operation to compare.

Load settings

Pixel operations work with browser-decoded 8-bit RGBA. They can discard source metadata, color profiles or higher bit depth. PNG compression compares decoded pixels, not byte-identical files. Animated images are rejected here; use animation tools instead.

When to use PNG Gradient Generator

Create a banner background, slide backdrop or reusable gradient texture.

Choose dimensions, two colors, direction and opacity, then Preview. Export is a raster PNG, not a CSS gradient. Transparent gradients use the selected uniform opacity.

Using PNG Gradient Generator

Create horizontal or vertical two-color PNG gradients at custom dimensions and opacity. Start from presets, compare backgrounds and export original-size gradient artwork.

Open a PNG, JPG or WebP, or try the example. Generators can begin without a file.
Start with a quick preset or adjust the main task controls. Preview the change and compare it with the working image.
Download the result PNG. Keep edit commits a preview for a next operation; Undo and Reset original help you compare alternatives.

Example

Create a banner background, slide backdrop or reusable gradient texture.
Choose dimensions, two colors, direction and opacity, then Preview. Export is a raster PNG, not a CSS gradient. Transparent gradients use the selected uniform opacity.

Questions & answers

What is the main purpose of this tool?

Create a banner background, slide backdrop or reusable gradient texture. Choose dimensions, two colors, direction and opacity, then Preview. Export is a raster PNG, not a CSS gradient. Transparent gradients use the selected uniform opacity.

Are images uploaded for processing?

Image processing runs locally in your browser. Public pages can also load advertising and optional Analytics, as described in the privacy information.

Can I use large or animated images?

Still images are limited to 20 MiB and 8 million pixels. Animated images are rejected here; use the APNG or GIF tools.

Does export preserve the original file exactly?

Pixel operations use decoded 8-bit RGBA and encode a new PNG. Higher bit depth, metadata and color-profile details may change. Compare the preview and retain your original.