I came across this post from Josh Comeau explaining how to achieve gorgeous, realistic shadows in user interfaces. I love how clearly he shows that CSS effects are not just surface decoration, but can be skillfully used to depict a world that our brains can understand as a 3D space, with its own dimensionality, rules of physics, and of course — light sources and colour interactions.

Having studied drawing and painting, I strive to create user interfaces that feel representational, not abstracted — the most compelling interfaces succeed in creating the illusion of being “real.” Not in a skeuomorphic way that aims at photorealism, but in the same way that the simplest animation can feel like it has a physical presence. 

Check out Josh’s Shadow Palette Generator here.

(Of course, for more on this topic, see the tremendously influential Material Design guidelines.)