Use of shadows on different backgrounds

I have a UI element composed of two sub-elements, one magenta and one white. When a shadow is applied to the super element, it is a lot more pronounced / contrasted when seen alongside the lighter, white element than the magenta.

My question is, to what extent is this a realistic representation of how shadow behaves in real life, and secondly, does it justify setting up two separate shadows and reducing opacity/radius around the white element?

EDIT:

Here's a close up, with greys moving from #D3D5D4 to #D1D0D1.