Text seems a bit blurry on a backdrop blur (html/css)

Question

I'm currently facing a slight problem with text on top of a 'glass-morphism' effect that is achieved by the backdrop-filter: blur() property. In some cases, the text on top of the div with the glass effect seems a bit blurred or something. This seems to happen when the text jumps to the next line, due to the variable width.

Side-by-side comparisons: https://imgur.com/a/Sq0Unq7.

As you can see, the difference between the viewport width can be as small as 1 pixel. Removing the backdrop-filter fixes the issue, but I'd like to keep it if it's possible. I've tested this in Chrome and Edge (and Internet Explorer, but that doesn't support the backdrop-filter property). Both came out the same.

This is the code for the 'glass' div:

.glassback {
   height: auto;
   background: rgba(0, 0, 0, 0.55);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   backdrop-filter: blur( 4px );
   -webkit-backdrop-filter: blur( 4px );
   border-radius: 10px;
   padding: 25px;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

<div class="col-xl-3 col-lg-3 col-md-6 col-12 glassback">
    <h3 class="landingpage">FIND YOUR NEW HOME TODAY.</h3>
    <br>
    <p class="landingpage">We offer a wide variety of apartments and studios in cities like <b>Eindhoven</b>, <b>Tilburg</b> and <b>Arnhem</b>.</p>
    <p class="landingpage">Now the real question is:<br>where do <b>you</b> want to live?</p>
    <form action="" method="POST">
        <div class="row">                       
            <div class="col-10">
                <select name="cityselection" id="cityselection" class="form-control overflow">
                    <option class="overflow" value="all" selected>Eindhoven, Tilburg, Arnhem, &#39;s-Hertogenbosch...</option>
                    <option value="Eindhoven">Eindhoven</option>
                    <option value="Tilburg">Tilburg</option>
                    <option value="Arnhem">Arnhem</option>
                    <option value="sHertogenbosch">&#39;s-Hertogenbosch</option>
                    <option value="Amersfoort">Amersfoort</option>
                </select>
            </div>
            <div class="col-2 searchbutton">
                <button type="submit" class="btn btn-danger" name="search"><i class="fas fa-search"></i></button>   
            </div>                      
        </div>
    </form>
</div>

Does anyone have any clue? If you need more info, just ask! :)

Answer 1

It's mainly due to the browser engine, and the blurry fonts effect can vary depending of your browser, div size, and even your browser render interpretation. FYI, this behavior also affects div drawings (like a circle having a border radius 100%). Edges can be blurry also in this case.

In all this mess you have a proper workaround: don't apply the backdrop-filter to the div that contains your text, but create a separate absolute div that has the effect, and place it below your text or content. Here is the fix of your code:

<div class="col-xl-3 col-lg-3 col-md-6 col-12 glassback">
    <div class="effect"></div>
    <h3 class="landingpage">FIND YOUR NEW HOME TODAY.</h3>
    <br>
    <p class="landingpage">We offer a wide variety of apartments and studios in cities like <b>Eindhoven</b>, <b>Tilburg</b> and <b>Arnhem</b>.</p>
    <p class="landingpage">Now the real question is:<br>where do <b>you</b> want to live?</p>
    <form action="" method="POST">
        <div class="row">                       
            <div class="col-10">
                <select name="cityselection" id="cityselection" class="form-control overflow">
                    <option class="overflow" value="all" selected>Eindhoven, Tilburg, Arnhem, &#39;s-Hertogenbosch...</option>
                    <option value="Eindhoven">Eindhoven</option>
                    <option value="Tilburg">Tilburg</option>
                    <option value="Arnhem">Arnhem</option>
                    <option value="sHertogenbosch">&#39;s-Hertogenbosch</option>
                    <option value="Amersfoort">Amersfoort</option>
                </select>
            </div>
            <div class="col-2 searchbutton">
                <button type="submit" class="btn btn-danger" name="search"><i class="fas fa-search"></i></button>   
            </div>                      
        </div>
    </form>
</div>

and the css:

.glassback {
    height: auto;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 10px;
    padding: 25px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    position: relative;
}
.effect {
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

And a snippet with a concret example:

body {
  background-image: url('https://i.imgur.com/S57AcCZ.png');
  background-size: 100%;
  background-color: grey;
}
.container {
  position: relative;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: white;
  font-size: 20px;
}
.effect {
  backdrop-filter: blur(15px) saturate(100%);
  -webkit-backdrop-filter: blur(15px) saturate(100%);
  background-color: rgba(39, 39, 39, 0.15);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

<div class="container">
  <div class="effect"></div>
  <div class="content">
    here is my sharp text
  </div>
</div>