An example of How to Give a Glass Background Effect to the Text with CSS filter property

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .background {
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .blur {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        transition: filter .5s ease;
        backface-visibility: hidden;
      }
      .background:hover .blur {
        filter: blur(0);
      }
      .text {
        display: inline-block;
        font-family: sans-serif;
        text-transform: uppercase;
        color: #f5e689;
        font-weight: 500;
        text-align: center;
        position: relative;
        left: 25%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="background">
      <div class="blur"></div>
      <h1 class="text">Paris <br>lights</h1>
    </div>
  </body>
</html>