An example of how to give a glass background effect to the text with CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .glassy-text {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        color: #333;
        font-family: system-ui, sans-serif;
        line-height: 1.5;
        max-width: 50%;
        padding: 1rem 2rem;
      }
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .glassy-text {
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          background-color: rgba(255, 255, 255, 0.5);
        }
      }
      body {
        background-image: url('/uploads/media/default/0001/05/ddb73d2da485bbaf0496da74cb668cca105cb335.jpeg');
        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">
      The longest English word is 189,819 letters long.
    </div>
  </body>
</html>