用CSS實現Apple的液態玻璃（Liquid Glass）UI
不知道大家有沒有看了Apple的WWDC25？先不論他們說了什麼，我只在想他們的液態玻璃（Liquid Glass）UI要如何實現（這裡討論的是靜態效果）。
 |
| 部分UI改成毛玻璃樣式。 |
 |
| 然而大部分元件則是改成不太一樣的液態玻璃樣式。 |
backdrop-filter
一開始當然是先想到從以前就有的毛玻璃效果（Glassmorphism），也就是用backdrop-filter來嘗試：
See the Pen backdrop-filter by cj (@cjzopen) on CodePen.
但你可以發現，做不出底下文字或圖片扭曲的效果，於是就想到了SVG的filter。
<svg style="display: none;">
<filter id="wavy-distort">
<feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
feTurbulence
我們可以先在HTML裡創造一個擁有filter的SVG，其中包含feTurbulence：
- type: turbulence (亂流) / fractalNoise (雲)。
- baseFrequency: 雜訊圖的密度。
- numOctaves: 雜訊圖疊的層數。
- result: 類似 id，後續拿來引用的名稱。
再使用feDisplacementMap引用feTurbulence：
- scale: 扭曲強度。
- xChannelSelector: 水平方向拉扯的色彩頻道。
- yChannelSelector: 垂直方向拉扯的色彩頻道。
- in: 要被扭曲的影像來源（SourceGraphic、SourceAlpha或其它自訂來源，SourceGraphic代表實際的內容，SourceAlpha代表只看該內容的透明度）。
- in2: 拿來扭曲畫面的參考圖片。
接下來只要在外面包一層實際的元素當作wrapper，並使用overflow:hidden，另外再處理border和box-shadow，然後疊上好看的icon就可以實現了。
<div id="menu-bar">
<div class="menu-button">
<svg width="40" fill="currentColor" viewBox="0 0 576 512"></svg>
<svg width="40" fill="currentColor" viewBox="0 0 576 512"></svg>
<svg width="40" fill="currentColor" viewBox="0 0 576 512"></svg>
</div>
<div class="bubble"></div>
</div>
#menu-bar {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
width: min(460px, 80vw);
border: var(--menu-bar-border);
box-shadow: var(--menu-bar-shadow-1), var(--menu-bar-shadow-2);
border-radius: var(--menu-bar-radius);
overflow: hidden;
z-index: 999;
padding: var(--menu-bar-padding);
}
.menu-button {
display: flex;
gap: var(--menu-button-gap);
justify-content: space-evenly;
color: var(--dark-text-color);
svg {
width: clamp(32px, 7.5vw, 42px);
height: auto;
transition: var(--menu-button-svg-transition);
}
}
.bubble {
position: absolute;
top: -20px; /* 隱藏品質較差的邊緣 */
left: -20px;
width: 200%;
height: 200%;
backdrop-filter: var(--bubble-blur-filter); /* 毛玻璃 */
background-color: var(--bubble-background);
filter: url(#wavy-distort); /* 扭曲 */
z-index: -1;
}
 |
| 我嘗試做的液態玻璃效果（在codepen查看完整原始碼）。 |
使用這個方法確實可以做到讓底層內容扭曲的效果，但數值還不是調得很漂亮，需要再花時間處理。以上給各位參考。
留言
張貼留言