Everything You Need to Know About Blend Mode in CSS

Usually, when adding an image to a website, the first thing you do is edit the image in an external software, such as Photoshop. Not really. But, it in a lot of cases you will be able to add effects to the image . Does the blend mode eliminate the need to use this kind of software? directly with CSS Background Blend Mode and Mix Blend Mode When using the property, you can blend the background color or image of an element. Blend modes are defined as a value and they specify of the background image with the color, or other background images, behind it. background-blend-mode how to blend or mix the colors On the other hand, the property specifies how the content of and the content of its direct parent. Elements on overlapping layers will blend with those beneath it. In this case, it’s important to mention the property — it stops the elements with mix-blend-property from blending with the backdrop. mix-blend-mode an element blends with its background isolation Background-Blend-Mode Let’s show the basic usage of the background-blend-mode by the background image with the background color. blending CSS .image-blend{ background: url(‘beach.png’); background-color: blue; background-blend-mode: multiply;} On the top, you can see the original image, while the bottom shows the image with blend mode applied to it. First, needs to be specified, and afterwards a background color that the image will be blended with. There are many blend modes available to choose from. Here, the blend mode is added to demonstrate how it will affect the image. Along with a solid background color, a can also be used for blending. a background image URL multiply background gradient Now, let’s look at how you can use background-blend-mode for . We are going to blend the following two images together: blending two images together CSS .two-images-blend { background: url(‘beach.png’), url(‘house.png’); background-color: blue; background-blend-mode: lighten;} CSS .two-images-blend { background: url(‘beach.png’), url(‘house.png’); background-blend-mode: lighten;} In this case, you can see two examples. The first one has a background color added to it, while the second has no background color. I have demonstrated two possible values for the background-blend-mode, but there are many of them: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity. Mix-Blend-Mode A popular usage of this effect is . When doing this, it is useful to keep in mind usage of the property. creating cut out text line-height HTML Hello world CSS .container { background-image: url(‘beach.png’); background-size: cover;} .header-text { font-size: 7rem; text-transform: uppercase; color: #fff; text-align: center; background-color: darkcyan; mix-blend-mode: multiply;} Support Before using this property, make sure you check out for more details on its support for these properties. Currently, the property has a slightly better support, hopefully, mix-blend-mode will catch up soon. Can I Use background-blend-mode I have explained the basics of these two properties, now it’s up to you to play with the properties and create beautiful and interesting visuals for your website. Have you had any experience with this property? Originally published at kolosek.com on April 5, 2018.