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 CSS code, you can achieve this effect without the need for any fancy software or complex tools. In this beginner-friendly guide, we'll walk through the steps to remove the background of an image using CSS.
Understanding the CSS Property
The magic lies in the mix-blend-mode CSS property. This property allows you to specify how an element's content should blend with the content of its parent element or the element behind it. By setting mix-blend-mode: multiply;, we can remove the background of an image and make it transparent.
Setting Up Your HTML Document
This is my html code, as you can see my image have a write background and my html body have some other background color and I need to remove this white background and wanted to make it transparent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: #fbd290;
}
img {
width: 100px;
}
</style>
</head>
<body>
<img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>
Now, if I want to remove the background of the image, I can simply add only one line of code and that's mix-blend-mode: multiply;.
You can also add it to your image add check if that works for you or not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: #fbd290;
}
img {
width: 100px;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>
And that's it! With just one simple lines of CSS, you can effortlessly remove the background of an image on your webpage. Give it a try and see the magic happen! Happy coding!
If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, & Web Development.
You can find me on Twitter, LinkedIn, and GitHub.
Thanks for reading๐ป
Top comments (65)
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!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.