[CSS] How to fix the issue where mix-blend-mode does not work or does not match the design

2023-07-27

Here's how to fix the issue when the CSS property "mix-blend-mode", which allows you to specify blend modes (rendering modes) like screen or multiply, doesn't match the design.

As an example, in this article,

On this background

Background

overlay this car,

Car

and overlay this flare with screen mode.

Flare

This is what it looks like when "Flare" is set to "Screen" in Photoshop.

Appearance in Photoshop

Example where it doesn't match the design

Let's actually try to build it using "mix-blend-mode".

First, please take a look at this.

The mix-blend-mode is correctly applied to the car, but it is not applied to the background image.

The HTML structure is roughly like this.

<div class="bg">
	<!-- Background -->
	<img src="bg.jpg">
	<div class="cars">
		<!-- Car -->
		<img src="img/cars.png">
		<div class="flare">
			<!-- Flare -->
			<img src="img/flare.jpg">
		</div>
	</div>
</div>

We've placed the car and flare inside a div tag named .cars.

And we're applying "mix-blend-mode" to .flare with CSS.

.flare {
	mix-blend-mode: screen;
}

Click here to see the full CSS (open)

.bg {
	position: relative;
	overflow: hidden;
}
.cars {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	z-index: 1;
}
.flare {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	mix-blend-mode: screen;
	z-index: 2;
}

Example where it matches the design

Next, please take a look at this.

I think it matches the design!

The HTML structure is roughly like this.

<div class="bg">
	<!-- Background -->
	<img src="bg.jpg">
	<div class="cars">
		<!-- Car -->
		<img src="img/cars.png">
	</div>
	<div class="flare">
		<!-- Flare -->
		<img src="img/flare.jpg">
	</div>
</div>

Unlike before, the background, car, and flare are placed at the same level. (CSS has not been changed)

Why?

When "mix-blend-mode" doesn't work, the cause might be a stacking context.

A stacking context is a hierarchical structure generated when certain conditions are met, such as when `position` is set to `relative` or `absolute` and `z-index` is specified.

In this case, the "background, car, and flare" need to belong to the same stacking context.

In the "Example where it doesn't match the design", the car and flare were placed inside a div tag named .cars.
However, since .cars had `absolute` and `z-index` specified, it belonged to a different stacking context than the background.

So, if "mix-blend-mode" isn't working for you, try changing the HTML structure to ensure that the elements belong to the same stacking context!

Comments

If this was helpful, we'd appreciate your support!
Any support received will be used for childcare.

Or support us by buying something from the buttons below
(You don't have to buy the linked product.)

Amazon

楽天市場

Yahoo!ショッピング