Dual-Color Text

by

Yes, by setting the mix-blend-mode CSS property to the value difference. (I’ve also given an example of how you can create this background image without transform.)

As an added bonus, this also makes text selection work properly. 🙂

#main {
  background: linear-gradient(to right, #000 50%, #fff 50%);
}

#main > p {
  color: #fff;
  mix-blend-mode: difference;
}
<div id="main">
<p>I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects.</p>
</div>

More Related Contents:

  1. Vertical Text Direction
  2. Setting a max character length in CSS
  3. How to stop text from taking up more than 1 line?
  4. HTML: Changing colors of specific words in a string of text
  5. Changing the highlight color when selecting text in an HTML text input
  6. Paragraph of text in circle using CSS [duplicate]
  7. How to use an tag inside a in the middle of a text? [duplicate]
  8. Making text background transparent but not text itself
  9. How can I align text directly beneath an image?
  10. How to place Text and an Image next to each other in HTML?
  11. CSS triangle containing text
  12. Bad: [html] in html code i can’t make two form input in one row [closed]
  13. How to center an element horizontally and vertically
  14. Make container shrink-to-fit child elements as they wrap
  15. How to overlay one div over another div
  16. Element will not stay centered, especially when re-sizing screen
  17. Position an element relative to its container
  18. curved div with transparent top
  19. HTML/CSS – Best practice for preserving white space on certain elements?
  20. How to stretch flex child to fill height of the container?
  21. Set width of dropdown element in HTML select dropdown options
  22. CSS selector with period in ID
  23. How remove border around image in css?
  24. Why doesn’t vertical-align work properly when using float in CSS?
  25. a href link for entire div in HTML/CSS
  26. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  27. Why would Google use a font tag?
  28. Styling the “ element in CSS?
  29. inline-block element with no text renders differently
  30. Sizing flex items on the last row

Leave a Comment