CSS Liquid Glass Panel

<svg width="0" height="0" aria-hidden="true">
  <filter id="lg-bend" x="0" y="0" width="100%" height="100%"
          color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" baseFrequency=".012 .018"
                  numOctaves="2" seed="4"/>
    <feGaussianBlur stdDeviation="2" result="soft"/>
    <feDisplacementMap in="SourceGraphic" in2="soft" scale="46"
                       xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<div class="lg-scene">
  <div class="lg-panel">
    <strong>Liquid glass</strong>
    <p>The stripes bend as they pass behind it.</p>
  </div>
</div>

.lg-scene {
  position: relative;
  overflow: hidden;
  height: 220px;
  display: grid;
  place-items: center;
}

/* The stripes drift right to left. The layer is one period
   wider than the scene and moves exactly one period
   (90px / sin 115deg = 99.3px), so the loop has no seam. */
.lg-scene::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 100px);
  background: repeating-linear-gradient(115deg,
    #ff9040 0 18px, #ffd444 18px 36px, #57d9a3 36px 54px,
    #38bdf8 54px 72px, #c084fc 72px 90px);
  animation: lg-drift 40s linear infinite;
}

@keyframes lg-drift {
  to { transform: translateX(-99.3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-scene::before { animation: none; }
}

/* Frosted glass as the base. Firefox and Safari accept url()
   here and then paint nothing, so it cannot go in this rule. */
.lg-panel {
  width: min(80%, 290px);
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  color: #101012;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 10px 28px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  backdrop-filter: blur(9px) saturate(1.3);
}

/* Chromium is the one engine that runs an SVG filter
   inside backdrop-filter. */
@supports (-webkit-app-region: inherit) {
  .lg-panel {
    backdrop-filter: url(#lg-bend) blur(1px) saturate(1.4);
  }
}

<div class="lg-scene">
  <div class="lg-panel lg-copy">
    <strong>Bent in Chromium, Firefox and WebKit</strong>
  </div>
</div>

/* adds to the .lg-scene and .lg-panel rules and the SVG above */
.lg-copy {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: none;
}

.lg-copy strong {
  position: relative;
}

/* filter, unlike backdrop-filter, runs url() in all three
   engines, so the panel carries a copy of the scene and bends that */
.lg-copy::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: repeating-linear-gradient(115deg,
    #ff9040 0 18px, #ffd444 18px 36px, #57d9a3 36px 54px,
    #38bdf8 54px 72px, #c084fc 72px 90px)
    0 0 / calc(100% + 100px) 100% no-repeat;
  filter: url(#lg-bend);
  animation: lg-drift-copy 40s linear infinite;
}

/* moves the background, not the layer, so the bends stay
   put and the stripes pass through them */
@keyframes lg-drift-copy {
  to { background-position: -99.3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-copy::before { animation: none; }
}