CSS实现类似IOS26玻璃效果

效果图

CSS代码

.liquid-glass() {
  position: relative;
  border-radius: var(--theme-glass-border-radius) !important;
  background: var(--theme-bg-element) !important;
  border: none !important;
  --theme-liquid-glass: rgba(0, 0, 0, 0.24);
  --theme-liquid-glass05: rgba(255, 255, 255, 0.5);
  --theme-liquid-glass06: rgba(255, 255, 255, 0.6);
  --theme-liquid-glass008: rgba(255, 255, 255, 0.08);
  --theme-liquid-glass012: rgba(255, 255, 255, 0.1);
   
  @supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
    background: var(--theme-liquid-glass) !important;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: inset 1px 1px 0px 0px var(--theme-liquid-glass05),
      inset -1px -1px 0px 0px var(--theme-liquid-glass06);
    background: radial-gradient(circle at top left, var(--theme-liquid-glass012), transparent 20%),
    radial-gradient(circle at bottom right, var(--theme-liquid-glass008), transparent 15%);
    border-radius: var(--theme-glass-border-radius);
  }
  &::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -2;
    box-shadow: inset 2px 2px 6px 2px rgba(255, 255, 255, 0.2),
      inset -2px -2px 4px -1px rgba(255, 255, 255, 0.2);
    border-radius: var(--theme-glass-border-radius);
  }
}
.liquid-glass {
  .liquid-glass();
}