.glass-effect {
  -webkit-backdrop-filter: saturate(120%) blur(.75em);
  backdrop-filter: saturate(120%) blur(.75em);
  pointer-events: none;
  isolation: isolate;
  color: #201d1d;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.glass-effect__fill {
  opacity: 1;
  border-radius: inherit;
  background-color: #d4d4d426;
  position: absolute;
  inset: 0;
}

.glass-effect__fill-burn {
  opacity: .05;
  mix-blend-mode: color-burn;
  border-radius: inherit;
  background-color: currentColor;
  position: absolute;
  inset: 0;
}

.glass-effect__highlight-soft {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -.28125em -.28125em .09375em -.328125em #ffffff80;
}

.glass-effect__highlight-strong {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset .28125em .28125em .09375em -.328125em #fffc;
}

.glass-effect__edge-light {
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  position: absolute;
  inset: 0;
  box-shadow: inset .1875em .28125em .09375em -.1875em #b3b3b380;
}

.glass-effect__edge-dark {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -.1875em -.28125em .09375em -.1875em #b3b3b34d;
}

.glass-effect__inner-glow {
  mix-blend-mode: darken;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 1.75em #f2f2f24d;
}

.demo-element {
  border-radius: 50em;
  width: 15em;
  height: 3.5em;
  position: relative;
}