CSS Text Color as the Inverse Background Color

Posted byBramus! 1 Comment on CSS Text Color as the Inverse Background Color 
Check out this Pen!

Set the color of the text to the opposite of the background – eg. rgb(255,0,0) becomes rgb(0,255,255) – and then use mix-blend-mode: difference; to make it all work.

Reverse Text Color Based on Background Color Automatically in CSS →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

  1. Great stuff!

    Different behaviour in browsers though: Chrome and Opera count to 100%, Firefox and Safari don’t, it stays at 0%. But the color change/inversion works in all, differently, but it works.

    Reply
Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.