How to make translucent text in CSS?

Question

How to create semi-translucent text like in beginning of that website https://superscene.pro/ I really wonder how to make text stay with define color and become translucent when there is object behind it ? Maybe someone can give tips on how to make dragging of object like on that website

Answer 1

You can do this using:

mix-blend-mode: exclusion;

You know, there is something called "inspector" where you can see styles and edit tags about the document. The inspector looks like this:

Answer 2

From looking at their source in the CSS, it appears to be coming from the following rule:

mix-blend-mode: exclusion;

Adding this rule should do what you desire. If you want more information, I recommend looking here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 3

You can use css mix-blend-mode on text container or in text itself and you can give color to text to give more details, more info here

.bg{
  background-image:url('https://i.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U');
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.blend{
  mix-blend-mode: exclusion;
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 6rem;
}

<div class="bg">
   <div class="blend">
      <p>This ts text</p>
   </div>
</div>