Shadows need a background color on the element to appear correctly.
Gotcha:
If an element with a shadow utility doesn't have its own background color (e.g.,
bg-white
), the shadow might appear to be cast by its content, or interact strangely with elements behind it, especially if the element itself is transparent.
Incorrect (No Explicit Background):
Content inside transparent element with shadow.
(Notice how the shadow might seem 'off' or interact weirdly with the page's gradient background if this box were truly transparent against it.)
Correct (With Background Color):
Content inside element with
bg-white
and shadow.
While shadows add depth, overusing very heavy shadows (like
shadow-2xl
) everywhere can make a UI feel cluttered or dated. Use them judiciously to highlight interactive elements or separate distinct sections.