<!-- 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: 70vw;
  height: 60vh;
  margin: auto;
  filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.1));
  display: flex;
  justify-content: center;
  align-items: center;
  &:before {
    content: '';
    width: 100vw;
    height: 100vh;
    background: url($image) center / cover;
    display: block;
    clip-path: inset(5em);
    filter: blur(10px);
    position: absolute;
    z-index: -1;
  }
  span {
    font-size: 4em;
    color: white;
    letter-spacing: 0.75em;
    padding-left: 0.75em;
  }
}

@media (max-width: 640px) {
  .drop-shadow {
    .glass {
       clip-path: inset(2em);
    }
    span {
      font-size: 2em;
    }
  }
}


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

body {
  font-family: 'Rajdhani', sans-serif;
  background: url($image) center / cover;
  display: flex;
}
View Compiled
/**
  description: CSS - Frosted Glass-use-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.