.light-blur-effect {
height: 100px;
width: 100px;
background-color: #BEEEF5;
filter: blur(3px);
opacity: 0.4;
display: block;
}<div class="light-blur-effect">
</div>Solution 1 :
Solution 2 :
Instead of drop shadow effect you can use box-shadow effect it is working completely fine it is only droping shadow and the size and direction of the shadow which you want you can easily modify in box-shadow
.light-blur-effect {
height: 100px;
width: 100px;
opacity: 0.4;
box-shadow: 20px 20px 20px #BEEEF5;
}<div class="light-blur-effect">
</div>Problem :
I only want to display the shadow effect without the square itself.
here is the block code:
.light-blur-effect {
height: 100px;
width: 100px;
background-color: #BEEEF5;
opacity: 0.4;
filter: drop-shadow(20px 20px 20px #BEEEF5);
}
The only thing that came to mind is to do through opacity, but as you may guess, it didn’t help
Comments
Comment posted by Geeky Quentin
Post your html code too so that the answerers can work on it and eventually come up with a solution
Comment posted by Homo
Thanks for trying to help, but the solution from the top fits my situation perfectly