是否可以使用CSS制作模糊的渐变阴影？

Question

这是一个影子：

所以我需要这个按钮悬停时出现的阴影。我知道它的CSS，但我没有设法模糊：

background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
border-radius: 100px;
filter: blur(5px);

所以，有两个基本问题：

1. 是否可以使用CSS制作这个模糊的东西？
2. 如果是，是否可以将其设为按钮阴影？或者我怎么解决这个问题？一种想法只是制作一个绝对定位的png，这有点hacky

更新

所以我想要实现的最终结果看起来像这样：



阴影重复按钮渐变

linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);

Answer 1

多个盒子阴影：

.box {
 margin:50px;
 width:100px;
 height:50px;
 border-radius:20px;
 color:#fff;
 text-align:center;
 line-height:50px;
 box-shadow:
 20px 5px 40px #CF77F3,
   0px 5px 40px #009BFF,
  -20px 5px 40px #2AC9DB;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
}

<div class="box">
this a button
</div>

Answer 2

您可以在现代浏览器中使用具有相同背景的伪元素并在其上应用滤镜模糊来获得此效果。

要获得与IE的兼容性，您还可以设置伪，并使模糊边框使用插入阴影。至少在Chrome中，边界上还有一小部分可以看到。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;