什么是 Glassmorphism？

Glassmorphism 是一种以半透明、模糊背景、柔和边框为特征的视觉风格。它模拟了磨砂玻璃的物理特性——光线透过玻璃时被散射，使得背景隐约可见但又经过柔化处理。

与传统的扁平设计不同，Glassmorphism 引入了深度与层次的概念。它通常包含以下核心要素：

  • 半透明背景：使用 rgba() 或 hsla() 设置背景色的透明度 背景模糊：通过 backdrop-filter: blur()
  • 对元素背后的区域进行高斯模糊 柔和边框：使用半透明边框替代硬边框，增强玻璃的通透感
  • 内阴影高光：在元素顶部添加微妙的白色内阴影，模拟玻璃表面的反光
你知道吗？ Glassmorphism 并非全新概念。早在 iOS 7 时代，Apple
就在控制中心和通知中心中使用了类似的模糊背景效果，但直到 2020 年前后，这一风格才被正式命名并广泛应用于 Web 设计