How to influence the filter so that it set white color for text on pink background?

49 Views Asked by At

I need to set text color dynamically based on background (text color could be white or black). I chose filter css for that. But I don't know how to control it. When background is pink I want to see my text white. When background is #ffebeeI want to see text color black. Now for both situations text color is black.

.container0 {
  background-color: red
}

.container1 {
  background-color: pink
}

.container2 {
  background-color: #ffebee;
}

.container3 {
  background-color: white
}

.filter {
  font-size: 40px;
  background: inherit;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
<div class="container0">
  <div class="filter">
    Text
  </div>
</div>

<div class="container1">
  <div class="filter">
    Text
  </div>
</div>

<div class="container2">
  <div class="filter">
    Text
  </div>
</div>

<div class="container3">
  <div class="filter">
    Text
  </div>
</div>

desired result (it shouldn't be hardcoded, but I hope for some hack):

enter image description here

0

There are 0 best solutions below