I'm currently trying to create continuity from a blender render to an element on an html page, and attempting to match the box-shadow property of an html element to the way drop shadow looks from a render.
Pretty much the only shading tool I have to work with while trying to imitate a render is this gradient argument called
One very popular example of box-shadow currently out there is material design (https://codepen.io/sdthornton/pen/wBZdXq), the shadows from which tend to look more life like.
In all of the shadows definitions are two sets of shadows:
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
These types of shadows definitely look closer than just a single gradient, but are still a bit off, so I'm trying to figure out what they're missing by reverse engineering the shadow from a render and imitating it with these simple gradients.
Here's the part where a good understanding of Blenders (cycles) rendering logic comes in
The parts of the shadow I think of as being most important to a shadow looking real are first the primary shadow (where the object blocks the light), followed by a sort of halo shadow (where the object blocks reflected light), and the halo shadow is also a bunch of light which softens the primary shadow. I imagine that is why material design uses two shadows.
Is there any other simplifiable components to a shadow that come to mind? I can also add white drop shadows/gradients to sort of imitate lighting.
Also, I apologize for this not being a strictly in the world of blender question, but this question is even more out of place in the html/design world.