Change text colour based on background to create cool designs
Last week I saw a web page design which had two contrasting background colours but the text colour changed seamlessly based on the background. Something like this below π
So I did a little research (I mean "google")
So I did a little research (I mean "googled") and found out that it's possible with just two CSS rules!
You need to set the text color
to white
and then with mix-blend-mode
set to difference
, the text colour automatically "inverts" based on background!
Simplest working demo is here
This can have so many use cases if you're creative!
Check out this other cool demo I created within just a few minutes of learning about this property.
Things to note:
1. This works best for mostly black and white backgrounds. For different colours, the inverted colour might not be what you like.
2. The property mix-blend-mode
is not supported by IE. Do check browser support before using it.
3. Make sure that the background image doesn't have many objects on it that might make the text unreadable. Plain backgrounds like the one above works great. Accessibility is important.
Play around with the demos above to learn more. I'm also doing the same :)
π Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, youβll absolutely love my eBook CSS Flex and Grid. Check it out!
π¨ Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one π
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.