Is a true pure-CSS XOR blend mode possible in 2025?
As an old assembly-language guy, I think about the math in blend modes.
And I was looking at today's CSS Battle Daily and thought it would be really easy and clever if I could toggle between foreground/background colors, by using the XOR of the two values.
But mix-blend "exclusion" isn't really XOR and "difference" only works in one direction. It's not reversible like XOR.
Just something I ponder over about once a year. 😸
I thought I'd ask the hive mind if anyone has come up with a method.
4 Replies
You could probably toggle very specific colors by rotating hue. But I'm wonder specifically about XOR.
Interesting that it could be done with masks. But that requires defining a mask. Which requires creating an img element (as far as I know). So an inline svg could get it done in this trivial case.
I actually do a fair amount with masks in my day job for colorizing icons and such.
Fun fact: browsers treat mask images like JavaScript as far as CORS policies are concerned.
<img> elements aren't required for masks. You can mask any element with any css-image including gradients. Have a look here: https://codepen.io/jsnkuhn/pen/WbNmjvd in practice i'd probably do something like this with pseudo elements but the general idea is there.