Mask only part of an element using CSS mask

user_1056885 0
Viewed 650

I have an element which I want to mask only at the end of the element. I managed to write some code to mask the end of the element, but the rest of the element is now also masked. I want to change the mask so that all off the element to the left of the mask is still visible.

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 30px;
  mask-repeat: no-repeat;
  mask-position: right;
}
<div class="masked"></div>

css-mask css
1 Answers

You need multiple mask

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(black 0 0)                    left,
    linear-gradient(to right, black, transparent) right;
  -webkit-mask-size:
    calc(100% - 30px) 100%,
    30px              100%;
  -webkit-mask-repeat: no-repeat;
}
<div class="masked"></div>

Or you adjust one mask like below:

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: linear-gradient(to right, black calc(100% - 30px), transparent);
}
<div class="masked"></div>

Another syntax:

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(to left , black, transparent) right/30px 100% no-repeat,
    linear-gradient(black 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}
<div class="masked"></div>

user_86203330
Related