如何基于 CSS3 实现毛玻璃模糊效果？

轩帅

.blur-effect {
  backdrop-filter: blur(18px);
}

.blur-effect {
  backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.blur-effect { 
  backdrop-filter: var(--chakra-backdrop-blur) var(--chakra-backdrop-brightness) var(--chakra-backdrop-contrast) var(--chakra-backdrop-grayscale) var(--chakra-backdrop-hue-rotate) var(--chakra-backdrop-invert) var(--chakra-backdrop-opacity) var(--chakra-backdrop-saturate) var(--chakra-backdrop-sepia);
  --chakra-backdrop-blur: blur(8px);
  --chakra-backdrop-brightness: var(--chakra-empty, );
  --chakra-backdrop-contrast: var(--chakra-empty, );
  --chakra-backdrop-grayscale: var(--chakra-empty, );
  --chakra-backdrop-hue-rotate: var(--chakra-empty, );
  --chakra-backdrop-invert: var(--chakra-empty, );
  --chakra-backdrop-opacity: var(--chakra-empty, );
  --chakra-backdrop-saturate: var(--chakra-empty, );
  --chakra-backdrop-sepia: var(--chakra-empty, );
}

2022 年 10 月 27 日写于〔深圳福田〕