For specifically the use case of a box with rounded corners, I have two materials to share. For both, I am using 2-3 different instances of “Generated Round Rect” to produce the masks for the shadows, and using the “Sharpness” setting to control the blur of the shadow. It’s a bit crude because the shadows aren’t quite as soft as I’d like, but it comes pretty close to the UI mock-ups I was trying to implement here.
The first material is a simple box with a drop shadow, like you’d use on a button:
The second material is a box that has an inner shadow with a border around the whole thing, like you’d use on a text field:
You should be able to use both of these with the “Box” image mode of buttons and text fields. The “margin” setting of the image is extremely important and finicky, and I haven’t yet figured out how to make the setting behave in a predictable way. The value you use for “margin” is affected by the “box width”, “box height”, and “corner ratio” settings in the material, as well as the “image size” setting in the UMG widget.
Here’s an example of the first material with image size 64x64, margin 0.5, box width 0.75, box height 0.75, and corner ratio 0.25:
Here’s an example of the second material with image size 512x256, margin 0.125, box width 0.9565, box height 0.9, and corner ratio 0.7 (pictured here with shadow offset X of 0.62, shadow offset Y of 0.61, and shadow sharpness of 0.05):
