How can I add a box-shadow on one side of an element?

Question

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; so the three other sides of the shadow are not visible.

Is there some better way to achieve this? Like box-shadow-right?

EDIT: My intentions are to create only the vertical part of the shadow. Exactly the same as what repeat-y of the rule background:url(shadow.png) 100% 0% repeat-y would do.

Answer 1

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv  {    border: 1px solid #333;    width: 100px;    height: 100px;    box-shadow: 10px 0 5px -2px #888;  }

<div class="myDiv"></div>

The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

5px is the blur radius :)

Example for you here.

Answer 2

clip-path is now (2020) one of simplest ways to achieve box-shadows on specific sides of elements, especially when the required effect is a "clean cut" shadow at particular edges (which I believe was what the OP was originally looking for) , like this:

.shadow-element {      border: 1px solid #333;      width: 100px;      height: 100px;      box-shadow: 0 0 15px rgba(0,0,0,0.75);      clip-path: inset(0px -15px 0px 0px);  }

<div class="shadow-element"></div>

...as opposed to an attenuated/reduced/thinning shadow like this:

.shadow-element {      border: 1px solid #333;      width: 100px;      height: 100px;      box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);  }

<div class="shadow-element"></div>

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */ clip-path: inset(Apx Bpx Cpx Dpx); 

Where:

• Apx sets the shadow visibility for the top edge
• Bpx right
• Cpx bottom
• Dpx left

Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.