What happens to already-opaque pixels?

They keep their original color exactly — alpha blending with a fully opaque source pixel returns that same pixel color, only the alpha channel is forced to 255.

What happens to fully-transparent pixels?

They become the exact background color you chose, since a transparent pixel contributes nothing to the blend.

What about anti-aliased edge pixels?

They're proportionally blended between their own color and the background color based on their original alpha, which is what keeps a logo's edges looking smooth instead of getting a jagged cutout.

Can I add a gradient background instead of a flat color?

Not with this tool — it accepts a single flat RGB color. For anything more complex, add the background in an image editor after flattening here.

Logo Background Adder - Add a Solid Background to a Logo

Overview

Introduction

This tool flattens a transparent logo onto a solid background color, entirely in your browser.

It's the inverse of removing a background: instead of keying color out, it fills transparency in.

What Is Logo Background Adder?

A logo-focused wrapper around the site's general PNG background adder: it reads a logo's RGBA pixels and alpha-blends each one over a chosen RGB color, producing a fully opaque output image.

Every pixel ends up with alpha 255, whether it started fully transparent, fully opaque, or partially blended.

How Logo Background Adder Works

For every pixel, the tool computes `alpha = a / 255` and blends each RGB channel as `channel * alpha + backgroundChannel * (1 - alpha)`, then writes the blended color with alpha forced to 255.

This standard alpha-compositing formula ('over' operator) is the same one canvas and image editors use internally.

When To Use Logo Background Adder

Use it when a transparent logo needs to go somewhere that doesn't render transparency, like some email clients, older document formats, or a JPG export pipeline.

It's also handy for previewing how a logo will look against a specific brand color before shipping final assets.

Often used alongside Logo Background Remover, Logo Background Changer and Transparent Logo Maker.

Features

Advantages

Runs entirely client-side; nothing is uploaded to a server.
Produces a clean, fully-opaque result with correctly blended edges, not a hard cutout.
Simple, predictable single-color fill.

Limitations

Only supports a single flat background color, not gradients, patterns, or images.
If the source logo has no transparency at all, this tool has nothing to blend and effectively passes it through unchanged.

Examples

Flatten onto white

Input

300x300 transparent PNG logo, background #FFFFFF

Output

300x300 opaque PNG with a white backdrop

Every transparent pixel becomes pure white; opaque pixels are unaffected.

Flatten onto brand navy

Input

150x150 transparent PNG icon, background #0F172A

Output

150x150 opaque PNG with a navy backdrop

Semi-transparent edge pixels blend smoothly into the navy background rather than showing a hard edge.

Best Practices & Notes

Best Practices

Pick the exact background color your target platform uses for the most seamless result.
Preview before downloading if the logo has soft, semi-transparent edges.

Developer Notes

This lib function is a thin, validating wrapper around the already-shipped `addBackgroundToPng` from the general PNG category — alpha-compositing math doesn't change whether the source pixels are a logo or any other PNG.

Logo Background Adder Use Cases

Exporting a logo for a platform that doesn't support transparency
Creating a branded flattened logo asset for email signatures
Previewing a logo against different background color options

Common Mistakes

Choosing a background color that doesn't match the intended destination, requiring a re-export later.
Expecting a gradient or image background — only a flat RGB color is supported.

Tips

Use the same background color as your website's header for a print-ready match.
Combine with the Logo Resizer afterward if the flattened logo needs specific dimensions.

Logo Background Adder