<!-- source pen: https://codepen.io/kylewetton/pen/bGbaazX -->
<div class="glass">
  <span>GLASS</span>
</div>
@import url("https://fonts.googleapis.com/css?family=Rajdhani:300&display=swap");

$image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg";

.glass {
  width: 80vw;
  height: 80vh;
  margin: auto;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: #fff;
    font-size: 4rem;
    color: white;
    letter-spacing: 0.75em;
    padding-left: 0.75em;
  }
}
@media (max-width: 640px) {
  .glass {
    span {
      font-size: 2em;
    }
  }
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Rajdhani", sans-serif;
  background: url($image) center / cover;
  margin: 0;
  display: flex;
}
View Compiled
/**
  description: CSS - Frosted Glass-use-backdrop-filter
  source pen: https://codepen.io/kylewetton/pen/bGbaazX 
  my blog link: https://yogwang.site/2022/CSS-frosted-glass/
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.