How to get box-shadow on left and right sides only with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *