JSFiddle - React, Tailwind, and code Playground

Другой цвет текста на разном фоне

by Ankhena

HTML

<div class="container">
  <span class="text">
      Hello Toster
    <br>border-radius: <span class="text-color">100px</span>;
    <br>overflow:hidden;
    <br>background-color:red;
    <br>color:white;
</span>
</div>

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: white;
}

.container::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  border-radius: 50px 0 0 50px;
  overflow: hidden;
  background-color: black;
  transition: all 1s;
}

.text {
  position: relative;
  color: white;
  z-index: 2;
  mix-blend-mode: exclusion;
}
.text-color {
  color: orange;
}
.container:hover::after {
  width: 270px;
}