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 inside div with mix-blend-multiply:
Similarly out can write this with TailwindCSS
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)
Your cover image is pretty misleading, as is the title of the article. If you use multiply with that, you will go from this:
To this:
Unfortunately, that is not what the
multiplyblend mode does at allYes 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 !
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.
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.
superb
cool, i think i need more css tricks like this β¨
Would you allow me to publish your post translated into Brazilian Portuguese, here on DevTo π?
cool, i think i need more css tricks like this
Thanks!