如何使用CSS实现body元素的背景色模糊效果

解决方案 #

你直接对body添加filter: blur()会导致所有页面内容同步模糊，正确做法是把渐变背景单独放在伪元素中渲染，再对伪元素应用模糊效果，不会影响后续添加的页面内容。

修改后的完整代码如下：

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 200px; 
    width: 200px;
    position: relative;
    overflow: hidden; /* 裁剪模糊后的边缘溢出 */
}
body::before {
    content: ''; /* 伪元素必须设置content才会渲染 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    filter: blur(8px); /* 数值越大模糊程度越高，可自行调整 */
    z-index: -1; /* 把背景层放到内容下方 */
    transform: scale(1.1); /* 放大10%避免模糊后边缘出现透明空白 */
}

<body>
  <!-- 后续添加的所有内容都不会被背景的模糊效果影响 -->
</body>

如果你的页面暂时不需要在body内放其他内容，也可以直接给原有body样式加一行filter: blur(8px)就能看到效果，更推荐上面的伪元素方案，可扩展性更强。

内容的提问来源于stack exchange，提问作者noobaka