CSS毛玻璃效果 取自Apple官網

效果取自apple官網的選單區域
純靠CSS達成毛玻璃效果

-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,0.72);

backdrop-filter屬性的內容

blur: 模糊
saturate: 飽和度


brightness: 明度
contrast: 對比度
drop-shadow: 陰影
grayscale: 灰階
hue-rotate: 色相
invert: 反轉
sepia: 棕褐色

關於站主

Shiro

因為興趣無限擴張,一直很猶豫要不要寫一個很雜的Blog,後來還是這麼做了。

聯絡:shiro050102✦gmail.com  ✦請自行更換成@

CssCSS