如何用CSS实现类云朵/高斯模糊效果？

嘿，我明白你用drop shadows做云朵效果时的挫败感——那种方法确实很难做出云朵那种蓬松、柔和的自然感，毕竟drop shadow是跟着元素硬轮廓走的，没法模拟云朵边缘那种模糊扩散的层次感。我来给你几个靠谱的CSS方案，亲测好用：

方法1：多层模糊伪元素叠加（最自然的云朵形态） #

这个思路是用主元素做云朵的基础轮廓，再通过伪元素创建多个大小、位置不同的圆形，给每个元素加上不同程度的模糊和透明度，让它们融合成蓬松的云朵效果：

<div class="cloud"></div>

.cloud {
  position: relative;
  width: 220px;
  height: 80px;
  background: #ffffff;
  border-radius: 100px;
  margin: 60px auto;
  /* 给主元素加轻微模糊，让边缘过渡更柔和 */
  filter: blur(6px);
}

/* 左侧的云朵凸起 */
.cloud::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 50%;
  top: -50px;
  left: 30px;
  filter: blur(18px);
  opacity: 0.85;
}

/* 右侧的云朵凸起 */
.cloud::after {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  background: #ffffff;
  border-radius: 50%;
  top: -65px;
  right: 25px;
  filter: blur(22px);
  opacity: 0.75;
}

你可以调整伪元素的大小、位置、模糊值和透明度，来模拟不同形态的云朵——比如增加第三个伪元素，就能做出更复杂的云朵形状。

方法2：Box-shadow + 整体模糊（极简实现） #

如果不想写多个伪元素，也可以用box-shadow创建多个不规则的“凸起”，然后给整个元素加模糊，让这些阴影自然融合：

<div class="cloud-simple"></div>

.cloud-simple {
  position: relative;
  width: 0;
  height: 0;
  margin: 90px auto;
  /* 整体模糊让阴影融合成云朵 */
  filter: blur(14px);
}

.cloud-simple::before {
  content: '';
  position: absolute;
  width: 190px;
  height: 70px;
  background: #ffffff;
  border-radius: 70px;
  top: 35px;
  left: -95px;
  /* 用box-shadow创建多个云朵凸起 */
  box-shadow: 
    -45px -35px 0 12px #ffffff,
    45px -25px 0 18px #ffffff,
    -25px 25px 0 8px #ffffff,
    55px 15px 0 10px #ffffff;
}

这种方法代码更简洁，适合快速生成基础的云朵效果，调整box-shadow的参数就能改变云朵的形态。

方法3：背景模糊云朵（适合 overlay 场景） #

如果你需要的是类似“半透明云朵模糊覆盖在背景上”的效果，可以结合backdrop-filter: blur()和多层模糊元素，做出通透的朦胧感：

<div class="cloud-backdrop"></div>

.cloud-backdrop {
  position: absolute;
  top: 60px;
  left: 100px;
  width: 320px;
  height: 160px;
  border-radius: 120px;
  /* 半透明底色 + 背景模糊 */
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  filter: blur(4px);
}

.cloud-backdrop::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  top: -55px;
  left: 40px;
  filter: blur(15px);
}

.cloud-backdrop::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  top: -70px;
  right: 30px;
  filter: blur(20px);
}

核心技巧总结 #

不管用哪种方法，核心都是多层模糊元素的叠加：通过不同大小、模糊程度、透明度的形状，模拟云朵蓬松、不规则的边缘，而不是依赖单一的投影效果。你可以根据需求调整颜色（比如换成浅灰色模拟阴天云朵）、模糊值和元素位置，来匹配你的设计风格。

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