• • 新答案**

我做了一个在线生成器，可以帮助您轻松获得渐变阴影：https://css-generators.com/gradient-shadows/
您所要做的就是调整一些值并获得代码：

button {
  margin: 50px;
  border-radius: 999px;
  padding: 10px 30px;
  font-size: 25px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border: none;
  background: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
  position: relative;
  transform-style: preserve-3d;
}
button::before {
  content: "";
  position: absolute; 
  inset: -10px;
  background: inherit;
  filter: blur(20px);
  transform: translate3d(15px,15px,-1px);
  border-radius: inherit;
  pointer-events: none;
}

<button >
  this a button
</button>

更多详情：https://css-tricks.com/different-ways-to-get-css-gradient-shadows/

• • 旧答案**

那么多个框影呢？
一个二个一个一个

在现代浏览器中，使用具有相同背景的伪元素并对其应用滤镜模糊可以获得这种效果。
为了与IE兼容，你也可以设置一个伪，并获得模糊的边界使用嵌入阴影.至少在Chrome中，有一个小的遗留下来的边界，仍然可以看到.

.test {
  margin: 20px;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);;
  border-radius: 50px;
  display: inline-block;
  height: 100px;
  width: 200px;
  position: relative;
  border: solid 4px black;
}

#test1:after {
  content: "";
  position: absolute;
  background-image: inherit;
  border-radius: inherit;
  width: inherit;
  height: inherit;
  transform: translate(0px, 20px) scale(1.1);
  z-index: -1;
  filter: blur(14px);
}

#test2:after {
  content: "";
  position: absolute;
  border-radius: 90px;
  width: 250px;
  height: 150px;
  z-index: -1;
  top: 1px;
  left: -25px;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
  box-shadow: inset 0px 0px 25px 18px white;
}

<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>