How to stop box shadow from merging into background color?

Question

How can I achieve this result, my box shadow is being overwritten by the below div's background color

 .mainBg { width: 100%; height: 300px; background-color: #f4f1f1; } 

 <div style="height: 9vh; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.33); background-color: #ffffff; width:100%"> </div> <div class="mainBg"> </div> 

Answer 1

This is a known issue. To cause box-shadow shadows to get over a background, be it an image or a flat color/gradient, you need two properties:

• z-index to be higher than that of the background, in order to tell the navigator that this is on a higher layer than the background
• position: relative in order to cause the rendering engine to realize that it needs to render relative to the rest (and display the shadow)

 .mainBg { width: 100%; height: 300px; z-index: 0; background-color: #f4f1f1; } 

 <div style="height: 9vh; z-index: 1; position: relative; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); background-color: #ffffff; width:100%"> </div> <div class="mainBg"> </div> 

Answer 2

hi what do you mean by saying that, you have assigned first div's height to 9vh and that's the problem, try some other units or decrease it by pixel...

also this is a tool that can help you there...

https://www.cssmatic.com/box-shadow