I’m playing around creating UI elements (buttons, menus, etc.) and was wondering if there was a way to create drop shadows (without lighting) similar to what you can do with CSS (drop-shadow). From what I can see the only way is to use a Graphics game object and have an offset semi-transparent filled rectangle, but that doesn’t really look very nice.
There’s nothing built-in to handle this, but you could achieve a similar effect by having a duplicate of the UI element and applying a black tint to it, then placing it below the UI element itself. It would be WebGL only, though, as tinting doesn’t work in Canvas. An alternative would be to render the object to a CanvasTexture, or a RenderTexture, and do a similar thing there.
Finally, you could have ‘drop shadow’ versions of your UI images as PNGs and just display them as images below the UI. Which, depending on the quantity of them, isn’t as bad an idea as it may sound.