How to create shadow over a background color with Tailwind?

user_7279624 0
Viewed 36

I have two elements one with shadow and the other with a background color as such:

<div class="shadow-lg">
    ...
</div>
<div class="bg-white">
    ...
</div>

When the bottom item does not have a background color, the top element's shadow is completely visible. However, when the bottom element has a background color as shown in the above code, the bottom part of the shadow is not visible.

enter image description here vs enter image description here

Why does this happen and how can I prevent this?

tailwind-css css
2 Answers

Because both elements are adjacent to each other, you don't have any gap between them. Your second element covers the shadow of your first element. If you disable the background for your second element, it doesn't get covered by anything, which is why it's visible.

You could inspect your second element and see it's adjacent to your first element border: enter image description here

You can fix it in many ways; it depends on your goal.

For example, add margin to your first/second element:

<div class="shadow-lg">
    ...
</div>
<div class="bg-white mt-4">
    ...
</div>

enter image description here

Another solution that you might want to use here is adding a position class to your first element which is relative. This way your shadow will go over your second element.

<div class="relative shadow-xl">
    ...
</div>
<div class="bg-white">
    ...
</div>

enter image description here

user_177185870

there should be a gap between the 2 divs for the shadow to be visible.

Just add mb-3 to the shadow div and it will work fine.

Or add z-10 to the shadow element to keep it on top no matter what:

<div class="shadow-lg z-10">
...
</div>
<div class="bg-white">
...
</div>
user_150407710
Related