如何用纯CSS实现毛玻璃效果，形成长尾关键词？

本文共计894个文字，预计阅读时间需要4分钟。

持续创新，加速成长！这是参与掘金日新计划+6月文案挑战赛的第23天，点击查看活动详情+原文简介+点赞+关注+收藏=学会了+在我年轻时做过的开发中，毛戈壁应用最广泛的是掘金。

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

在我年轻时做过的开发中，毛玻璃应用得最广是在复杂的背景图上。

如果你希望在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。

本文主要讲解背景毛玻璃效果，也会讲讲文字如何做出模糊效果。

如果你懒得写代码，也可以使用 《这18个网站能让你的页面背景炫酷起来》 里面提到的 Glass Morphism 网站直接生成毛玻璃效果。

背景图毛玻璃

在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。

在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后再设置一下背景的不透明度就能实现一个简单的毛玻璃效果。