Remove Image Backgrounds with One Line of CSS

9/26/20252 min read

Ever had a pristine product card ruined by an uploaded image with a white (or off‑brand) background? There’s a clever CSS trick that makes those backgrounds “disappear” without JavaScript: mix-blend-mode.

The idea

Place the product image inside a container (a div) that has your desired background color. Apply a blend mode to the image so the browser compares pixels between the image and the container and keeps the darker one. White (the brightest) is discarded, so the product “pops” against your chosen backdrop.

.card {
  background: #f3f4f6; /* your desired card background */
}

.card img {
  mix-blend-mode: darken; /* key: retain the darker pixel per position */
}

Why it works

Blending happens pixel-by-pixel at matching positions.
With darken, the darker color wins.
White backgrounds lose to almost any darker card background, so they visually vanish.

When it works best

The image background (e.g., white) must be brighter than the card background.
The product’s colors should be darker than the card background, so the product remains visible.

Tip: Convert colors to HSL and compare the “lightness” value—lower lightness means darker.

Caveats

If a user uploads an image with a dark background, darken won’t remove it. Consider server-side background removal for inconsistent uploads.
Test against your brand palette to ensure legibility.

Browser support