Sometimes, we want to get box-shadow on left and right sides only with CSS.
In this article, we’ll look at how to get box-shadow on left and right sides only with CSS.
How to get box-shadow on left and right sides only with CSS?
To get box-shadow on left and right sides only with CSS, we use clip path.
For instance, we write
<div class="shadow-element"></div>
to add a div.
Then we write
.shadow-element {
width: 100px;
height: 100px;
background-color: #ffc300;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.75);
clip-path: inset(0px -15px 0px -15px);
position: relative;
left: 15px;
}
to set clip-path to inset(0px -15px 0px -15px) to hide the vertical shadows with negative values.
Conclusion
To get box-shadow on left and right sides only with CSS, we use clip path.
