projectLiquidGlass.seoTitle

projectLiquidGlass.playgroundTitle

projectLiquidGlass.playgroundIntro

GLASS_01

projectLiquidGlass.dragMe

projectLiquidGlass.presets

projectLiquidGlass.controls.displacement 60projectLiquidGlass.controls.blur 2pxprojectLiquidGlass.controls.tint 0.20 projectLiquidGlass.controls.sheen projectLiquidGlass.controls.grain

projectLiquidGlass.dockTitle

projectLiquidGlass.dockIntro

projectLiquidGlass.recipeTitle

projectLiquidGlass.recipe1Name

projectLiquidGlass.recipe1Desc

projectLiquidGlass.recipe2Name

projectLiquidGlass.recipe2Desc

projectLiquidGlass.recipe3Name

projectLiquidGlass.recipe3Desc

projectLiquidGlass.recipe4Name

projectLiquidGlass.recipe4Desc

projectLiquidGlass.recipe5Name

projectLiquidGlass.recipe5Desc

projectLiquidGlass.codeTitle

projectLiquidGlass.codeIntro

the-filter.svgSVG

<svg width="0" height="0" aria-hidden="true">
  <filter id="lgDistort"
          x="0%" y="0%" width="100%" height="100%"
          color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise"
                  baseFrequency="0.008 0.008"
                  numOctaves="2" seed="17"
                  result="noise" />
    <feGaussianBlur in="noise" stdDeviation="3"
                    result="soft" />
    <feDisplacementMap in="SourceGraphic" in2="soft"
                       scale="60"
                       xChannelSelector="R"
                       yChannelSelector="G" />
  </filter>
</svg>

the-surface.cssCSS

.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  background: rgba(15, 15, 24, 0.2); /* fixed tint */
  backdrop-filter: blur(2px) url(#lgDistort) saturate(1.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -1px 0 rgba(255, 255, 255, 0.05),
    0 8px 32px rgba(0, 0, 0, 0.24);
}
.glass > * { position: relative; z-index: 1; }

sheen-and-grain.cssCSS

/* diagonal gloss sheen — the glossy giveaway */
.glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, transparent 60%);
}

/* static frost grain: feTurbulence rastered once, zero per-frame cost */
.glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

projectLiquidGlass.codeRules

projectLiquidGlass.supportTitle

projectLiquidGlass.support1

projectLiquidGlass.support2

projectLiquidGlass.stackTitle

projectLiquidGlass.stackSvg // feTurbulence + feDisplacementMap

backdrop-filter // blur + url() + saturate

projectLiquidGlass.stackLayers // projectLiquidGlass.stackLayersNote

Vue 3 // projectLiquidGlass.stackVueNote

projectLiquidGlass.stackZero // projectLiquidGlass.stackZeroNote