最近我们内部的一个低代码平台完成上线了，它的首页是这样的（数据脱敏）：当然，这不是一个项目并且不是本文的重点。主要看这个页面的背景，一张渐变的背景图，带有磨砂（磨砂玻璃）纹理效果，看起来比较高级。如果把页面的内容元素剥离，只剩下背景，大概是这样的：一开始是打算把图片切掉的，但是仔细想想，这个效果其实可以很容易的用CSS。本文讨论：如何使用CSS制作渐变背景图，并带有如上图的磨砂（磨砂玻璃）纹理效果如何使用CSS-doodle工具批量生成效果图，并实现渐变图带动画效果。以上背景效果看似复杂，其实很简单。就是：CSS中的多块不规则渐变背景+高斯模糊蒙版，即借助background+backdrop-filter:blur()即可实现。去掉上面叠加的GaussianBlurmask，后面的元素其实非常简单明了。可能是这样的：下面是一个简单的代码，我们用3个div实现3个渐变图，然后用clip-path把每个图随机裁剪成不规则的多边形：
