<div class="container">
  <div class="frosted"></div>
  <h1>Frosted Glass Effect</h1>
  <div class="blink">✨</div>
</div>

body {
  background: url(https://images.unsplash.com/photo-1520440712-31802af3c144?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1173&q=80)
    no-repeat center;
  background-size: cover;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 30rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.31);
  backdrop-filter: blur(5px) saturate(100%);
}
.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.25)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.frosted {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0.5;
  pointer-events: none;
  border-radius: 8px;
  z-index: -1;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.75),
      rgba(0, 0, 0, 0.5)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

h1 {
  font-family: sans-serif;
  color: #fff;
}

.blink {
  position: absolute;
  font-size: 40px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-content: center;
  top: -20px;
  left: -20px;
  padding: 2px 5px 8px;
  border-radius: 40px;
  background-color: #fff;
}