Search code examples
cssbox-shadow

Box shadow on top, bottom and left only

I want to add the box-shadow just to top, bottom and left sides only - no right side.

This is my CSS class:

.topBottomLeft{
      box-shadow: inset -1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000 !important;
}

This is my jsfiddle: https://jsfiddle.net/Ly4tocny/

It is applying the box shadow however to all four sides. What am I missing?

Solution

  • You are close to a solution. You just need to tweak the values a bit.

    Here is a working example with your method, with some added emphasis so you can see the changes I made.

        box-shadow: inset 0 5px 0.5px 0.5px #000,
    inset 0 -5px 0.5px 0.5px #000,
    inset  5px 0.5px 0.5px #000;

    https://jsfiddle.net/ercnvzj7/

    I recommend this, for future shading: http://css3generator.com/