An example of how to give a glass background effect to the text using CSS backdrop-filter property

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .glassy-text {
        background-color: rgba(89, 79, 128, 0.74);
        border-radius: 5px;
        color: #ffffff;
        font-family: Lucida Handwriting, serif;
        line-height: 1.7;
        font-size: 20px;
        text-align: center;
        max-width: 50%;
        padding: 2rem 3rem;
      }
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .glassy-text {
          -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
          background-color: rgba(89, 79, 128, 0.74);
        }
      }
      body {
        background-image: url('https://www.pocketwatch.co.uk/blog/wp-content/uploads/2018/05/ThinkstockPhotos-97407485-1024x680.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <div class="glassy-text">
      That tiny pocket in jeans was designed to store pocket watches.
    </div>
  </body>
</html>