Transparency and Edge Quality: Why Cutouts Look Wrong on Dark Backgrounds

A logo that looks perfect on the white page it was designed for often shows a faint halo when dropped onto a dark surface. The file is not corrupt — the edge pixels are carrying color information that only made sense against the original background.

What the alpha channel stores

A PNG pixel has four values: red, green, blue and alpha. Alpha runs 0 (fully transparent) to 255 (fully opaque). Values in between are what make curved and diagonal edges look smooth instead of jagged — an edge pixel that is 40% covered by the shape gets alpha 102.

The catch: that pixel also has RGB values. And those RGB values were chosen while a specific background was visible.

Where fringing comes from

Two distinct causes, often confused:

Matted edges. The image was flattened against a background at some point, then the background was keyed out. The semi-transparent edge pixels retain the old background's color mixed in. Cut a logo out of a white page and its edges hold white; place it on black and you get a light halo.

Premultiplied alpha mismatch. Some pipelines store RGB already multiplied by alpha, others store it straight. Composite premultiplied data as if it were straight and edges go dark; do the reverse and edges go light. This is the usual explanation when an image looks fine in one application and fringed in another.

The tell for matting: zoom to 800% on a curved edge. If the semi-transparent pixels trend toward white or toward black rather than toward the shape's own color, they were matted.

Fixes, cheapest first

Get an unmatted original. An SVG, or a PNG exported directly from the design file with transparency on, has correct edge colors. This solves the problem instead of hiding it.
Place the asset on a chip. A rounded container in the original background color removes the need for the edges to be neutral. Common in real design systems for exactly this reason.
Shrink one pixel. Scaling the image down slightly pushes contaminated edge pixels into the interpolation and reduces visibility. A workaround, not a fix.
Re-matte deliberately. If you know the target background, compositing against that specific color makes the edges correct for that one placement.

Operations that damage edges

Resizing. Downscaling blends neighboring pixels. If the RGB under transparent pixels is garbage — which it often is, since fully transparent pixels' colors are usually ignored — that garbage gets blended into visible edge pixels. Quality resamplers handle alpha correctly; naive ones produce dark or bright rims.

Rotating by non-right angles. Any rotation other than 90/180/270 resamples every pixel and creates new semi-transparent edges around the whole image. Rotating by 90° increments is lossless in this respect.

Cropping. Safe. It discards pixels without resampling, so surviving edges are untouched.

Converting to JPEG. Destroys transparency entirely — every transparent pixel becomes the matte color, usually white. And because JPEG is lossy around sharp transitions, the new hard edge picks up ringing artifacts on top.

Converting to WebP. Preserves alpha in both lossy and lossless modes. Lossy WebP can soften edge alpha slightly; lossless is exact.

Choosing a format for cutouts

Vector logo or icon → SVG, and stop worrying about edges
Raster cutout that must stay exact → PNG or lossless WebP
Raster cutout where size matters → lossy WebP, and inspect the edges at 100%
Anything going into JPEG → decide the matte color deliberately; do not let a tool pick white silently

Testing before you ship

Put the asset on three backgrounds: white, near-black, and a mid-tone saturated color. Matting problems are nearly invisible on white, obvious on black, and the mid-tone catches premultiply mismatches that both extremes hide.

Do it at final display size, not zoomed in. A halo visible at 400% may be irrelevant at 32px, and a subtle one at 100% may be what users actually see.

Try it

Format Converter — convert between PNG, JPEG and WebP, with a deliberate white matte when JPEG is the target
Image Cropper — crop and rotate in 90° steps, which preserves alpha exactly
Image Compressor — compress PNG and WebP while keeping the alpha channel

Related reading: PNG vs JPEG vs WebP covers the format tradeoffs, and Designing a Dark Mode Color System explains why dark themes surface these problems first.