用html和css实现一下液态玻璃(liquid glass)效果

Feb 6, 2026

Last updated on Feb 6, 2026

参考了大神的实现，自己又调整了参数，并且适配了黑暗模式，仅供参考。

效果就在主页的菜单Hover就可以看到，在Safari中svg反射效果不生效，用Chrome就能正常显示。

1
<div className="liquid_glass-wrapper h-full w-full">
2
  <svg style={{ display: "none" }}>
3
    <defs>
4
      <filter
5
        id="liquid_glass_filter"
6
        x="0%"
7
        y="0%"
8
        width="100%"
9
        height="100%"
10
        filterUnits="objectBoundingBox"
11
      >
12
        <feDisplacementMap scale="200" />
13
      </filter>
14
    </defs>
15
  </svg>
16
  <div className="liquid_glass-outer"></div>
17
  <div className="liquid_glass-cover"></div>
18
  <div className="liquid_glass-sharp"></div>
19
  <div className="liquid_glass-reflect"></div>
20
</div>

适配了黑暗模式的css

1
.liquid_glass-wrapper {
2
  --liquid_glass-border-radius: 1rem;
3
  position: relative;
4
  display: flex;
5
  overflow: hidden;
6
  border: 1px solid #00000020;
7
  background: linear-gradient(180deg, #ffffff10, #fafafa00);
8
  box-shadow:
9
    inset 0 2px 4px 0 #fff,
10
    inset 0 -4px 4px 0 hsla(0, 0%, 100%, 0.1),
11
    inset 0 -4px 16px 0 #fff,
12
    inset 0 4px 10px 0 hsla(240, 3%, 45%, 0.07),
13
    0 4px 14px -10px rgba(53, 53, 79, 0.4),
14
    0 11px 28px -10px rgba(53, 53, 79, 0.1);
15
  border-radius: var(--liquid_glass-border-radius);
16
}
17

18
.liquid_glass-border-radius {
19
  border-radius: var(--liquid_glass-border-radius);
20
}
21

22
.liquid_glass-outer {
23
  backdrop-filter: url(#liquid_glass_filter);
24
  position: absolute;
25
  inset: 0;
26
  z-index: 0;
27
  border-radius: var(--liquid_glass-border-radius);
28
  mask-image:
29
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
30
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
31
  mask-composite: exclude;
32
}
33

34
.liquid_glass-cover {
35
  backdrop-filter: blur(2px);
36
  position: absolute;
37
  inset: 0;
38
  z-index: 2;
39
  border-radius: var(--liquid_glass-border-radius);
40
  background: rgba(0, 0, 0, 0.02);
41
}
42

43
.liquid_glass-sharp {
44
  position: absolute;
45
  inset: 0;
46
  z-index: 3;
47
  box-shadow:
48
    inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
49
    inset -1px -1px 0px 0px rgba(255, 255, 255, 0.6);
50
  border-radius: var(--liquid_glass-border-radius);
51
}
52

53
.liquid_glass-reflect {
54
  position: absolute;
55
  inset: 1px;
56
  z-index: 2;
57
  border-radius: var(--liquid_glass-border-radius);
58
}
59

60
.dark {
61
  /* https://juejin.cn/post/7514618352829448244 */
62
  .liquid_glass-wrapper {
63
    --liquid_glass-border-radius: 1rem;
64
    position: relative;
65
    display: flex;
66
    overflow: hidden;
67

68
    border: 1px solid #ffffff20;
69
    background: linear-gradient(180deg, #ffffff10, #fafafa00);
70
    box-shadow:
71
      inset 0 2px 4px 0 #00000040,
72
      inset 0 -4px 4px 0 hsla(0, 0%, 0%, 0.1),
73
      inset 0 -4px 16px 0 #00000060,
74
      inset 0 4px 10px 0 hsla(0, 0%, 13%, 0.07),
75
      0 4px 14px -10px rgba(112, 112, 167, 0.4),
76
      0 11px 28px -10px rgba(53, 53, 79, 0.1);
77
    border-radius: var(--liquid_glass-border-radius);
78
  }
79

80
  .liquid_glass-border-radius {
81
    border-radius: var(--liquid_glass-border-radius);
82
  }
83

84
  .liquid_glass-outer {
85
    backdrop-filter: url(#liquid_glass_filter);
86
    position: absolute;
87
    inset: 0;
88
    z-index: 0;
89
    border-radius: var(--liquid_glass-border-radius);
90

91
    mask-image:
92
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
93
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
94
    mask-composite: exclude;
95
  }
96

97
  .liquid_glass-cover {
98
    backdrop-filter: blur(2px);
99
    position: absolute;
100
    inset: 0;
101
    z-index: 2;
102
    border-radius: var(--liquid_glass-border-radius);
103
    background: rgba(0, 0, 0, 0.02);
104
  }
105

106
  .liquid_glass-sharp {
107
    position: absolute;
108
    inset: 0;
109
    z-index: 3;
110
    box-shadow:
111
      inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2),
112
      inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3);
113
    border-radius: var(--liquid_glass-border-radius);
114
  }
115

116
  .liquid_glass-reflect {
117
    position: absolute;
118
    inset: 1px;
119
    z-index: 2;
120
    border-radius: var(--liquid_glass-border-radius);
121
  }
122
}