Prisma saysmix-blend-mode blends an element’s colors with what’s beneath it, like Photoshop layer modes.
mix-blend-mode: multiply | screen | overlay | difference determines how an element's pixels combine with layers below. It powers duotones, knockout text, and color interactions. background-blend-mode does the same between an element's own background layers.
Power-ups you unlock
mix-blend-mode blends with layers beneath
multiply/screen/overlay/difference and more
background-blend-mode blends bg layers
Great for duotones and knockout text
Jank the Janitor attacks — common mistakes
Expecting a blend with nothing beneath
Blend modes creating stacking contexts
Overuse making text unreadable
Boss battleOverlay text on an image with mix-blend-mode:difference for a knockout effect.