Gradient Background

Adding a gradient or solid background to a transparent PNG

The gradient background tool is built for cut-out product photos: you upload a transparent PNG and the tool fills the empty alpha area with a gradient or a solid colour. Two modes are available - gradient and solid. Gradient mode ships a grid of preset two-colour gradients, plus custom start and end colour pickers and an angle slider from 0 to 360 degrees (default 135). Solid mode fills the whole canvas with one colour and a row of preset swatches.

A canvas-size dropdown sets the output frame: fit image, 1:1 (1080x1080), 4:5 (1080x1350), 9:16 (1080x1920), 16:9 (1920x1080) and 3:4 (1080x1440). An image-scale slider from 10 to 200 percent (default 100) resizes the cut-out subject within that frame. You can download the result as PNG or JPG.

• Gradient mode: preset two-colour gradients, custom start/end colours, angle 0-360 degrees.
• Solid mode: one fill colour plus preset swatches.
• Canvas presets: 1:1, 4:5, 9:16, 16:9, 3:4, or fit image.
• Image scale 10-200 percent; download PNG or JPG.

Why transparency is required

The gradient or solid fill only shows through where the source image has transparent pixels. A JPG has no alpha channel, so uploading a flat JPG just paints the background over the whole picture. If your source is a JPG, first cut the subject out with the background remover, or convert it to PNG with the converter.

The common workflow for e-commerce is: cut out the product, drop it here, choose a brand gradient or clean white, set a 1:1 or 4:5 canvas, and export. The PNG option preserves any remaining transparent edge; the JPG option is smaller and fully opaque once the background fills the frame.

Step by step

Once the subject sits on the new background, you can frame it precisely with crop or resize it with resize to match a marketplace or social dimension.

1. Upload a transparent PNG (or WebP) cut-out.
2. Choose gradient or solid mode.
3. Pick a preset, or set custom start/end colours and the angle.
4. Choose a canvas size and adjust the image scale.
5. Download as PNG (keeps transparency) or JPG (fully opaque, smaller).

Angle, canvas size and PNG vs JPG export

The angle slider (0 to 360 degrees, default 135) controls the direction of the two-colour gradient: 135 degrees is the diagonal from top-left to bottom-right, 0 degrees runs left to right, and 90 degrees runs top to bottom. The canvas-size dropdown fixes the output frame independently of the source - 1:1 at 1080 pixels for marketplace squares, 4:5 at 1080 by 1350 for social portraits, 9:16 at 1080 by 1920 for phone screens, 16:9 at 1920 by 1080 for banners, and 3:4 at 1080 by 1440. The image-scale slider then grows or shrinks the cut-out subject inside that frame from 10 to 200 percent.

Choose PNG when the edges around the subject must stay transparent, and JPG once the background fills the whole canvas - JPG is smaller and has no alpha. Because the fill only shows through transparent pixels, a flat JPG input will just be covered; start from a cut-out. Everything runs locally in the browser, so product shots and brand assets are never uploaded.

• Angle 0-360 degrees: 0 horizontal, 90 vertical, 135 diagonal.
• Canvas presets: 1:1, 4:5, 9:16, 16:9, 3:4, or fit image.
• Image scale 10-200 percent to size the subject within the frame.
• PNG keeps transparent edges; JPG is smaller once the frame is full.

Solid and Gradient Background Generator

A clean backdrop makes a subject or a thumbnail look finished. PixlReady creates solid-color fills and smooth linear gradients in your browser: pick the start and end colors, set the angle and transparency, and choose from ready-made presets. Export the background as a PNG or JPG in the size you need, or combine it with the background remover to place a cut-out subject onto a branded backdrop.

Gradients are generated at full resolution with no watermark, and nothing is uploaded, so you can iterate on colors privately until the composition works.

Tips for best results

• Keep contrast high enough that any overlaid text or logo stays readable.
• Use subtle, low-saturation gradients for professional backdrops; save neon blends for posters.
• Remove the background of a portrait first, then drop it onto the gradient for a studio look.
• Export PNG when you need transparency around the canvas edges.

Common use cases

• Branded backdrops for product and portrait cut-outs
• Wallpaper, banner and presentation backgrounds
• Social media thumbnails with consistent colors
• Placeholder backgrounds in mockups and app screens

Frequently Asked Questions