CSS可以制作模糊的渐变阴影吗？ [英] Is it possible to make a blurred gradient shadow with CSS?

问题描述

这里是阴影：

因此，我需要将其作为出现在按钮悬停按钮上的阴影。我知道它的CSS，但是我没有做出任何模糊处理：

So I need this to be a shadow which appears on button hover. I know its css but I didn't manage to make any blur:

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

因此，有两个基本问题：

So, two basic questions:

1. 是否可以使用CSS来制作这种模糊的东西？


2. 如果可以，是否可以使其成为按钮阴影？还是我该如何解决？一种想法是只制作一个具有绝对定位的png，有点笨拙

更新

所以我想要达到的最终结果是这样的：

So the final result I want achieve looks something like this:

阴影重复按钮渐变

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

推荐答案

多个盒子阴影怎么样？

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

这篇关于CSS可以制作模糊的渐变阴影吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！