Shadow Gotcha: Background Color & Overuse

Gotcha: Shadows Need a Background Color

Incorrect: Shadow on Transparent Element

This box has shadow-lg but no background color of its own. The shadow seems to originate from the colorful gradient background of its container, not the box itself.

The shadow appears to be cast by the parent's gradient.

Correct: Shadow with Background Color

This box has shadow-lg and bg-white . The shadow is clearly cast by this white box, giving it proper depth.

The shadow is clearly associated with the white box.

Key Takeaway: Always apply a background color (e.g., bg-white , bg-blue-500 ) to elements you want to cast a shadow. If the element is transparent, the shadow effect can be misleading or look incorrect.

Gotcha: Overusing Heavy Shadows

Very Heavy Shadow (`shadow-2xl`)

This element uses shadow-2xl , which is a very strong shadow.

Large Shadow (`shadow-lg`)

This element uses shadow-lg , which is often sufficient for emphasis.

Guidance: While heavier shadows ( shadow-xl , shadow-2xl ) are available, they should be used sparingly. Overuse can make the UI feel heavy or dated. For most cases, shadow-sm , shadow-md , or shadow-lg provide a good balance of depth and modern design.