Is it possible to make a blurred gradient shadow with CSS?

问题

Here is a shadow:

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:

Is it possible to make this blurred thing with CSS?
If yes, is it possible to make it a button shadow? Or how else can I solve this? One thought was to just make a png with absolute positioning, which is hacky a bit

update

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

The shadow repeats button gradient which is

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

回答1:

What about multiple box-shadow:

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

回答2:

You can get this effect in modern browsers using a pseudo element with the same background, and a filter blur applied on it.

To get compatibility with IE, you can set also a pseudo, and to get the blurred borders use an inset shadow. At least in Chrome, there is a small left over of the border that still can be seen.

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

来源：https://stackoverflow.com/questions/49620419/is-it-possible-to-make-a-blurred-gradient-shadow-with-css

标签

css

css-filters