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...
For further actions, you may consider blocking this person and/or reporting abuse
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...
It does work for almost 80% of images but yeah sometimes it does not work.
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" š
Thanks for explaining it in more detail š. I didn't have the time for a longer post.
No problemo Jon, you've done it tones of times already š
It's not that it does or doesn't work - it simply isn't what the 'multiply' blend mode does.
"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
But it doesn't remove the background - that's entirely incorrect
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.
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.
this will not just replace white bg of black & white photo, please try some colorful stuff as well
If you have these two images (colourful background, and a foreground image with a white background):
And you use the multiply blend mode, you will end up with this:
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.
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! āØ
haha, yeh you're right I've some minor grammatical error, I'll edit it :)
Glad you loved my post!!
I have seen same thing in ezsnippet video, is it from there....
And more you can do Code Highlighting to your post
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
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.
Hoping more useful articles on NextJS ā„ļø from you š
Thanks ā„ļø
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.... šÆ
gonna definitely checkout your recent article :)
yes, dev's community really very supportive!
Thanks Raj, you loved my blog post and yes will keep sharing quality NextJs articles :)
Yes, I've learned from there only :)
I got it šā„ļø
This is totally awesome! I had no idea you could do this. Thank you so much for sharing with us!
Thanks for the lovely feedback :)
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.
I had no idea CSS allows this and with this level of ease. Thanks for sharing š.
yes, it does!
Thanks for the feedback :)
This article is in Google feeds š«”
haha, I can't belive thisš
Thank you so much for letting me know, this made my day!!
Sure, I will do it again someday mb ;)
Thanks
š
Even I can see that now <3
Very Helpful
Thanks :)
I had no idea this was possible. Thank you!
Even I learned it two days before, Hope it will help you :)
What kind of magic is this! š
Thank you!
Glad it helped, Thanks Nadia!
Thank you!!!
My pleasure :)
Hope it helped!
I have no idea about this
Yes, even I learned this few days before
thank you Madhu for sharing your findings,
and i thank everyone else for stressing the limitations of this solution.
As others have pointed out already, you are kinda misleading people here.
CSS
mix-blend-modedoes 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.
Learn something new from this blog.....š
Glad you learned something new,
Thanks Khaled!
This is great.
Works for all the images with white background.
Thanks for saving our time.
Hi Madhu Saini,
Your tips are very useful
Thanks for sharing
Glad those tips are useful, will keep sharing cool stuff :)
Thanks for the feedback:)
Wow!!! I'm blown!!! Thank you for this.
Glad it helped!
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.
Wow, its cool.
Now i dont need thirdparty
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.
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.
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.
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.
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:
If you're going to just have an all black image...
Why isn't it an svg?
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).