Question 227831 in CSS Question posted in
Some basic documentation can be found here.

Css – Child div shadow not appearing

Why won’t the shadow appear for the div with id="pin"? I’ve tried wrapping it in a div and applying the shadow to the parent but that wasn’t working either. How can I get the shadow to appear?

This is the HTML I have from my Tailwind playground.

<div class="relative flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
    <div id="pin" class="bg-red-500 shadow-2xl w-3 h-3 rounded-full"></div>
    <div>Content..</div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I tried your code and it works. The only problem is, the shadow is too small to be seen. To verify it you could make the circle bigger and try toggling the shadow on and off in your css devtool.

    Just a side note: shadow color is by default using the color of the tag’s text. This might also cause bad visibility on some background color.

    Login or Signup to reply.
  2. 0

    Explicitly like @ngtrthinh is referring to would be something in this ballpark:

    <div class=" flex min-h-screen flex-col items-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div id="note" class="w-40 h-40 bg-yellow-100 shadow-2xl p-4 flex flex-col items-center">
    <div id="pin" class="bg-red-500 shadow-[0_4px_3px_1px_rgba(0,0,0,0.6)]  w-3 h-3 rounded-full"></div>
    <div>Content..</div>
  </div>
</div>

    You can test this here: Play Tailwind

    Have a great day!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search