CODEWITHSUNDEEP
htmljquerycss
Arerrac
Arerrac

Reputation: 419

Change element color based on background, that its on

I would like to change an elements color based on the background, that it is standing on (not the background-color of the element itself).

In this example the logo is changing color based on the background: https://www.richardekwonye.com/

I can't seem to find anything on how that is done.

Thanks!

Upvotes: 2

Views: 2296

Answers (1)

technophyle
technophyle

Reputation: 9159

As the commenters said, it's done through mix-blend-mode CSS property. Official documentation.

Here's a proof-of-concept:

div.circle {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: green;
}

h1.header {
  display: inline-block;
  color: darkgray;
}

h1.logo {
  position: absolute;
  top: 0;
  color: lightgray;
  mix-blend-mode: difference;
}
<div class="container">
  <div class="circle"></div>
  <h1 class="header">Welcome to StackOverflow!</h1>
  <h1 class="logo">Hello</h1>
</div>

Upvotes: 3

Related Questions