Search code examples
htmlcsslinear-gradients

backdrop-filter in combination with mask-image doesn't work as expected on chrome

I have a certain problem with the two attributes mask-image and backdrop-filter in combination on Chrome v116.

I am trying to render a gradient-blur effect over a text. In Firefox this works fine but on Chrome only a white solid block is rendered.

This is how it should look (Firefox v116):

enter image description here

This is how it looks instead (Chrome v116):

enter image description here

Heres the code im using:

<div class="gradient-blur" *ngIf="checkOverflowBlurGradient(container)">
</div>

.gradient-blur {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  opacity: 1;
}

I checked on caniuse.com and chrome v116 is actually supported according to the documentation.

Now I am wondering if this problem is somehow caused by my browser or implementation related.

Solution

  • I have already fixed it myself. Apparently backdrop-filter in combination with mask-image is not really the best to get a continuous behavior on all browsers. So I tried mask: conic-gradient and got a pretty consistent result, which clearly looks better than my previous approach.

    Here is the code i used:

    .container {
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 10px;
}

.text {
  text-align: center;
}

.text {
  display: flex;
  mask: conic-gradient(from 90deg at 0px 0px, #0000 25%, #000 0) 0px 0px,
    linear-gradient(#000 70%, #0000 95%);
  -webkit-mask: conic-gradient(from 90deg at 0px 0px, #0000 25%, #000 0) 0px 0px,
    linear-gradient(#000 20%, #0000 95%);
}
    <div class="container">
  <div class="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div

    Additionaly heres a little CodePen.