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:
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%);
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With