Skip to main content
Question

What is the corresponding value of "pass through" in Figma blend mode to CSS "mix-blend-mode"?


Kyrie_Chen

Figma blend mode has a default value of “pass through”, but the default value for the “mix-blend-mode” property in CSS is “normal”. What is the corresponding value of “pass through” in the CSS property, and what is the difference between “pass through” and “normal”?

This topic has been closed for replies.

4 replies

IraX
  • Active Member
  • 145 replies
  • July 3, 2023

No difference if just a single layer. It can be used on a frame or group if you have a child layer set to another mode (e.g. Multiply) and want to affect the entire parent. So in that case the default would be Pass through and would show that child layer’s effect (Multiply), and then setting the parent to Normal would not (i.e. everything is Normal).

Not sure I would actually need/use that in real life, though.


Lucian_Manoliu

Hi @Kyrie_Chen the corresponding CSS value of Pass Trough in css is “mix-blend-mode: overlay;”
Or atleast its the one that comes the closest, imo.

Happy Figma!


Achilles
  • New Member
  • 4 replies
  • September 3, 2024

If I understand correctly, mix-blend-modes in css behave as if “pass-through” is defined by default (at least on the parent object), so you don’t really need to do much to mimic Figma behaviour. In other words, if you set a blending mode on an object in css, it will take the background into account by default (like pass-through). If you DON’T want that to happen then you need to define the isolation mode on the object to isolate the object from the background.
See here: isolation - CSS: Cascading Style Sheets | MDN


Hope this helps.
This is how I understand it, anyway.
Cheers


Achilles
  • New Member
  • 4 replies
  • September 3, 2024

Hi,
They are not quite the same thing.
Pass-through is basically whether you want the blend-modes defined within an object to also blend with other objects behind them.
Overlay in css works like in Photoshop: given two objects, it will darken colors in areas where the top object’s color is darker, and will lighten colors where the top object’s colors are lighter. It’s kind of like using “multiply” and “screen” at the same time.

CSS-Tricks – 12 Apr 15

That’s my understanding anyway…
Hope this is helpful.
Cheers


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings