drop shadow effect css-CodePudding

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

CodePudding user response：

    .light-blur-effect {
    height: 100px;
    width: 100px;
    background-color: #BEEEF5;
    filter: blur(3px);
    opacity: 0.4;
    display: block;
}

<div >
</div>

CodePudding user response：

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 >
</div>