DEV Community

Cover image for Remove background from Image using CSS only
jeetvora331
jeetvora331

Posted on

Remove background from Image using CSS only

In this beginner-friendly blog post, we will learn how to remove the background from an image using only CSS, specifically the mix-blend-mode property. This technique is useful for creating interesting visual effects and improving the performance of your website by reducing the need for edited images.

Why this trick is important?

When you download a .png file, you might expect it to have a transparent background. However, this is not always the case. Sometimes, a .png file might have a solid background color, such as white or black.

In such cases, you can use the mix-blend-mode property to remove the solid background color and create the appearance of a transparent background.

What is mix-blend-mode?

mix-blend-mode is a CSS property that defines how the content of an element should blend with the content of the element's parent and its background. With this, you can create nice blends and colors for parts of an element's content depending on its direct background Checkout this article

To remove the background from an image, we will use the mix-blend-mode property with the value multiply. This value will remove the whiter parts of the image. Here's an example:

Image inside div:
Image description

Image inside div with mix-blend-multiply:
Image description

Similarly out can write this with TailwindCSS

Image description

In this tutorial, we learned how to remove the background from an image using only CSS and the mix-blend-mode property. This technique allows for greater design flexibility, improved performance, and better SEO benefits compared to using edited images. With this knowledge, you can create interesting visual effects on your website and improve the overall user experience.

Top comments (10)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Your cover image is pretty misleading, as is the title of the article. If you use multiply with that, you will go from this:

Normal blend

To this:

Mulitply

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

This value will remove the whiter parts of the image

Unfortunately, that is not what the multiply blend mode does at all

Collapse
 
jeetvora331 profile image
jeetvora331

Yes Jon, that is true. But the cover image was only for the abstraction or the idea to show what the blog is about. I need to add this because the title sometimes can be interpreted as "remove the background image with css only". I have noted your suggestion and will try to improve from my next post.

Thankyou for your feedback !

Thread Thread
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

You could just replace the image in the banner for the one you used in the article, and add an explanation that it only works on black on white images.

Collapse
 
mackfitz profile image
Maciek Fitzner

To achieve the effect presented in the first image you could use mask-image, instead - with the boy's silhouette and the bulb in black, and the rest set to transparent.

Collapse
 
gourav_kumar_1 profile image
Gourav Kumar

superb

Collapse
 
roniardynt profile image
Ron

cool, i think i need more css tricks like this ✨

Collapse
 
dougsource profile image
doug-source

Would you allow me to publish your post translated into Brazilian Portuguese, here on DevTo 😉?

Collapse
 
kaushikantala profile image
kaushikantala • Edited

cool, i think i need more css tricks like this

Collapse
 
maxdzyubak profile image
Maxim Dzyubak

Thanks!