DEV Community

Cover image for How to remove background of an image with CSS

How to remove background of an image with CSS

Madhu Saini on April 03, 2024

Introduction Have you ever wanted to make the background of an image vanish on your website? Well, you're in luck! With just one line of...
Collapse
 
jonrandy profile image
Jon Randy šŸŽ–ļø • Edited

This does not do what you think it does at all. It does not remove the background. Try it with a coloured image - the colours will be ruined.

The page at MDN gives a nice example of the different blend modes. You can see how multiply affects way more than just the background...

Multiply Firefox logo with orange background

Collapse
 
madhusaini22 profile image
Madhu Saini

It does work for almost 80% of images but yeah sometimes it does not work.

Collapse
 
joelbonetr profile image
JoelBonetR šŸ„‡ • Edited

It affects the whole image, not just the background.

It has the illusion of "removing the background" in your example because it's a pure black thingy with high contrast... Now change the color of the black thingy to be a gradient from cian to green over an orange background and try again, you'll see what people is trying to tell you.

Color layer multiplication works by multiplying the colors of the blending layer and the base layer, always resulting in a darker color (Here's the reason your example seems to work).

More deeply it takes the RGB channel values from 0 to 1 of each pixel in the top layer and multiplies them with the values for the corresponding pixel from the bottom layer

It's useful for colouring shadows but i no way "removes the background of an image" šŸ˜…

Thread Thread
 
jonrandy profile image
Jon Randy šŸŽ–ļø

Thanks for explaining it in more detail šŸ‘. I didn't have the time for a longer post.

Thread Thread
 
joelbonetr profile image
JoelBonetR šŸ„‡ • Edited

No problemo Jon, you've done it tones of times already šŸ˜

Collapse
 
jonrandy profile image
Jon Randy šŸŽ–ļø • Edited

It's not that it does or doesn't work - it simply isn't what the 'multiply' blend mode does.

Thread Thread
 
madhusaini22 profile image
Madhu Saini

"mix-blend-mode" specifies how an element's content should blend with its background or with the content of the elements behind it. And multiply value is one of the blend modes available. And that's what we want

Thread Thread
 
jonrandy profile image
Jon Randy šŸŽ–ļø

But it doesn't remove the background - that's entirely incorrect

Thread Thread
 
ngdangtu profile image
Đăng TĆŗ • Edited

I agree with you. The fact of the image that lost the white background is just purely visually. The white bg is still there, it just got replace with other color. In short, the result image won't be able to serve any function of a transparent bg.

I would choose a more careful title like: "Replacing white bg of a black & white photo with another color"

This will make the post more useful.

Thread Thread
 
link2twenty profile image
Andrew Bone • Edited

What @jonrandy is trying to point out it that it's got nothing to do with replacing a background. All colours in the original image have been modified.

Multiple takes each pixel from the blend-mode'd image and the pixel directly below it then takes the colour as an RGB where each colour channel is a float between 0 and 1. Then it multiplies R * R, G * G and B * B.

This can be useful but advertising it as removing a background can be damaging for people that will believe this as face value.

Here's how some images will turn out. Were I to believe the post I would expect the black to be removed and nothing else to change.

unmodified

Thread Thread
 
madhusaini22 profile image
Madhu Saini

this will not just replace white bg of black & white photo, please try some colorful stuff as well

Thread Thread
 
jonrandy profile image
Jon Randy šŸŽ–ļø

If you have these two images (colourful background, and a foreground image with a white background):

Images
And you use the multiply blend mode, you will end up with this:

Blend mode multiply

Collapse
 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø

if 80% of all images are black and white, and 100% of your backgrounds are white, then it would work, yes.

Out in the real world, this is rarely, if ever, a working way of removing backgrounds from anything.

Collapse
 
anitaolsen profile image
Anita Olsen

If I may, I am not sure the title of your post is in proper English? What if you wrote the following instead: "How to remove the background of an image with CSS".

I hope this helped šŸ¤—

I love your post so much! āœØ

Collapse
 
madhusaini22 profile image
Madhu Saini

haha, yeh you're right I've some minor grammatical error, I'll edit it :)

Glad you loved my post!!

Collapse
 
sh20raj profile image
Sh Raj

I have seen same thing in ezsnippet video, is it from there....

Collapse
 
sh20raj profile image
Sh Raj

And more you can do Code Highlighting to your post

<style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
            mix-blend-mode: multiply;
        }
    </style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madhusaini22 profile image
Madhu Saini

Yeah, actually I've just started writing here like 2 days beforešŸ˜‚, before that I used to write on Hashnode. So, I'm not so handy with dev's features

Thread Thread
 
sh20raj profile image
Sh Raj

Hope you are finding much audiance and better community to interact. šŸ˜Š

I loved ā™„ļø this article

How to make Next.js app a PWA( Progressive Web App)

Learn, how you can build your first next.js app a Progressive Web App.

favicon madhusaini22.hashnode.dev

Hoping more useful articles on NextJS ā™„ļø from you šŸ˜ƒ

** šŸ’” Tip **
You can checkout my previous articles to know more dev community features šŸ˜ŽšŸ˜Š

Thanks ā™„ļø

Thread Thread
 
sh20raj profile image
Sh Raj

And I'm writing since a long time here and you such huge response on your startup article šŸ‘
I never got this much response on a single article.... šŸ’Æ

PS :- Felling Little Jelious šŸ¤”

Thread Thread
 
madhusaini22 profile image
Madhu Saini

gonna definitely checkout your recent article :)

 
madhusaini22 profile image
Madhu Saini

yes, dev's community really very supportive!

Thanks Raj, you loved my blog post and yes will keep sharing quality NextJs articles :)

Collapse
 
madhusaini22 profile image
Madhu Saini

Yes, I've learned from there only :)

Collapse
 
sh20raj profile image
Sh Raj

I got it šŸ˜Šā™„ļø

Collapse
 
anitaolsen profile image
Anita Olsen

This is totally awesome! I had no idea you could do this. Thank you so much for sharing with us!

Collapse
 
madhusaini22 profile image
Madhu Saini

Thanks for the lovely feedback :)

Collapse
 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø

This only works with black and white images.

Any colours in the image will get distorted (the further they are from black, the stronger), and the background has to be 100% white, otherwise it will still distort the colour of the backdrop.

There is also a different blend mode that works for white on black images, but I forgot which one that was.

Collapse
 
dlaravindgoud profile image
Aravind • Edited

I had no idea CSS allows this and with this level of ease. Thanks for sharing šŸ‘.

Collapse
 
madhusaini22 profile image
Madhu Saini

yes, it does!

Thanks for the feedback :)

Collapse
 
sh20raj profile image
Sh Raj

This article is in Google feeds šŸ«”

Image description

Collapse
 
madhusaini22 profile image
Madhu Saini

haha, I can't belive thisšŸ˜‚
Thank you so much for letting me know, this made my day!!

Collapse
 
sh20raj profile image
Sh Raj

Sure, I will do it again someday mb ;)

Thread Thread
 
madhusaini22 profile image
Madhu Saini

Thanks

Thread Thread
 
sh20raj profile image
Sh Raj

šŸ˜‡

Collapse
 
madhusaini22 profile image
Madhu Saini

Even I can see that now <3
Image description

Collapse
 
notne profile image
Sameer

Very Helpful

Collapse
 
madhusaini22 profile image
Madhu Saini

Thanks :)

Collapse
 
garrett profile image
Garrett / G66

I had no idea this was possible. Thank you!

Collapse
 
madhusaini22 profile image
Madhu Saini

Even I learned it two days before, Hope it will help you :)

Collapse
 
nadiafedev profile image
Nadia

What kind of magic is this! šŸ™€
Thank you!

Collapse
 
madhusaini22 profile image
Madhu Saini

Glad it helped, Thanks Nadia!

Collapse
 
mauronava_dev profile image
Mauro Nava

Thank you!!!

Collapse
 
madhusaini22 profile image
Madhu Saini

My pleasure :)

Hope it helped!

Collapse
 
maharmubashir profile image
maharmubashir

I have no idea about this

Collapse
 
madhusaini22 profile image
Madhu Saini

Yes, even I learned this few days before

Collapse
 
alexbodn profile image
abraham

thank you Madhu for sharing your findings,
and i thank everyone else for stressing the limitations of this solution.

Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

As others have pointed out already, you are kinda misleading people here.

CSS mix-blend-mode does not do what you think it does. it does not alter the image, so it does not remove the background it's still there, just not visible anymore.

In these conditions it makes it seem like it does that, as the white background of the image blends in with the background of your site.

Collapse
 
kmsaifullah profile image
Khaled Md Saifullah

Learn something new from this blog.....šŸ‘

Collapse
 
madhusaini22 profile image
Madhu Saini

Glad you learned something new,

Thanks Khaled!

Collapse
 
rudresh98 profile image
Rudresh

This is great.
Works for all the images with white background.
Thanks for saving our time.

Collapse
 
jangelodev profile image
JoĆ£o Angelo

Hi Madhu Saini,
Your tips are very useful
Thanks for sharing

Collapse
 
madhusaini22 profile image
Madhu Saini

Glad those tips are useful, will keep sharing cool stuff :)

Thanks for the feedback:)

Collapse
 
aeorck profile image
Godwin Daniel

Wow!!! I'm blown!!! Thank you for this.

Collapse
 
madhusaini22 profile image
Madhu Saini

Glad it helped!

Collapse
 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø

Others have already pointed out how this doesn't actually work for most cases; but what I want to add is that colour blending is actually a really cool concept and I want to encourage everyone to have a look at it.

It's both a good, visual way to learn about vectors and leads nicely into matrix operations for more advanced colour transformations.

Collapse
 
glendless profile image
Glend

Wow, its cool.
Now i dont need thirdparty

Collapse
 
joeattardi profile image
Joe Attardi • Edited

This won't work if your image has multiple colors in it. The background is removed in this case as a happy accident.

In the below demo, it doesn't fully remove the background and it affects the colors of the image.

See codepen.io/thinksInCode/pen/BaEYjBp for demo.

Collapse
 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø

A bit more precisely, it'll only work perfectly for black on white images, and still look relatively decent for very dark colours, as long as the background is 100% white.

I'm also fairly sure this will end up clamping the colourspace to sRGB so for some graphics this may reduce the vibrancy of the colours on displays that could otherwise display them properly.

Collapse
 
pcockerell profile image
Peter Cockerell

Or, more accurately, "How to convert the white pixels of an image to the same color as its background layer, while preserving the black pixels, and modifying the color of every other pixel that isn't either black or white to some unattractive hue."

The problem with presenting a basic operation like blend modes as some kind of "magic" without really explaining what exactly is going on is that you're dooming to disappointment the 90% of the people who try it with images that don't conform to the very specific kind of image it can be used with.

A much more useful article would be one that explains the transparency feature of PNG images and how to use an image editor to create an image whose transparent pixels would give the desired effect no matter what color the "foreground" pixels are. Or how SVG objects can draw over the background leaving the unrendered pixels untouched. Or an article that introduces the concept of blending modes in general, and uses the very specific example of multiplying white pixels to preserve the underlying color as a neat, albeit narrowly applicable use of blend modes. Any of these would have been much more satisfying than the current article.

Collapse
 
lnahrf profile image
Lev N.

Multiply is a blending mode that keeps the darker colors of the image and removes the brighter colors. This only works because the image you used is completely black and white.
Iā€™m sure you did not intend to mislead others. I think you should edit your article and add an explanation of the multiply blending mode and what it actually does.

Collapse
 
gorhovakimyan profile image
gorhovakimyan2001

Removing the background from an image using only CSS can be achieved through a CSS property called "background-clip". However, this method has limitations and might not work perfectly for complex backgrounds. Here's a basic example of how you can remove the background from an image using CSS:

Collapse
 
ekwoka profile image
Eric Kwoka

If you're going to just have an all black image...

Why isn't it an svg?

Collapse
 
giandidom profile image
gian-didom

This is just pure disinformation and clickbait. Only pure white backgrounds will be removed, and for any non-B/W image, the colors will be completely distorted (see comments below).