Box Shadow Not Going Over Background Color Of Contained Element

Basically I have a side bar that has an inset box shadow and inside that sidebar is a list of elements whose background color is orange... I would like to be able to make the inset

Solution 1:

box-shadow on the parent element will not go over the child element the same as the background color of the parent doesn't go over the child element's background.. you will have to assign the box-shadow to the child as well.. this is a jsFiddle of the problem.

To solve this you will have to use something like this:

.child{
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
}

This will create two shadows one from each side of the child element, which will look seamless with the parent's box-shadow.

View this working jsFiddle