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.

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!

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

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.

That’s my understanding anyway…

Hope this is helpful.

Cheers