CSS Tricks
CSS Trick

Background Removal with Blend Modes

Remove white or black backgrounds from images using mix-blend-mode.

#css #blend-modes #images #effects

Browser Support

✓ Chrome 41+ ✓ Firefox 32+ ✓ Safari 8+ ✗ Edge

Background Removal with Blend Modes

Remove solid backgrounds from simple graphics using blend modes.

/* Black image on white background */
img {
  mix-blend-mode: darken;
}


/* White image on black background */
img {
  mix-blend-mode: lighten;
}

Live Demo

Blend Modes
EFFECTS
CSS Code
.blend-demo {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.blend-item {
text-align: center;
}
.blend-box {
width: 80px;
height: 80px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.blend-original {
background: white;
}
.blend-applied {
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
.blend-star {
font-size: 2.5rem;
color: black;
}
.blend-applied .blend-star {
mix-blend-mode: darken;
}
.blend-label {
margin: 0.5rem 0 0 0;
font-size: 0.7rem;
opacity: 0.6;
}

Works best for icons, logos, and simple black/white graphics. Not suitable for photos.

Share this CSS trick

Comments