Two divs with drop shadow on same level


I have two divs that have drop shadows and are on the same z-index.

They are currently both casting a shadow on each other.

I would like them to both cast shadows on the background but NOT on each other. How do I do this?

Problem courtesy of: Mr_Chimp


You can't have two different element with the same stacking level. Elements always have different stacking-levels. That's why your second Element shadows the first Element. (Without z-index the appearence in the DOM determines the stacking-level)

Z-index works only on non-static positioned elements (relative,absolute) so that won't help either.

IMO you can't achieve the effect you want without some little css-hacking (Declaring a non-static position on the elements combined with an additional wrapper-element - don't declare z-index on the parent but only on the child-elements).


But please feel free to correct me if I am wrong.

Solution courtesy of: Christoph


Use this simple CSS trick, just create pseudoelement :after, set its z-index lower than divs and give a shadow to it. Following code will drop non-overlaping shadows under each div. Working example at

div {
    position: relative;

div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 30px black;
    z-index: -1;
Discussion courtesy of: MichalVales

This recipe can be found in it's original form on Stack Over Flow.