How can we make a soft drop shadow for a UMG Image?

This material function generates a rounded rectangular shape with a controllable border thickness, corner roundness, and anti-aliasing smoothing, all centered in UV space.

It uses Signed Distance Fields (SDF) to render smooth, resolution-independent shapes directly in the material, making it ideal for custom UI.

DISCLAIMER: I cannot upload as a text file or even on blueprint UE (I’m assuming because of the Border material functions so you will have to follow along lol

First we need to create the border material function.

(Material Function)

MF_Border Blueprint UE Paste

Now we need to create a modified version of the drop shadow material. Since my material setup is currently very messy.

Here’s what you need to do:

Start with the original drop shadow material – using 16 samples should be ideal for good results.

Locate the image texture nodes in the material.

These image textures will have a UV input.

Hold Ctrl and drag the UV input from the image texture node into the UV input of the Border Material Function.

Take the Opacity output and connect it to the Multiplier input of the corresponding Smoothstep node.

Now repeat that step for EVERY texture sample used for the drop shadow (Not the one that goes into the final color)

Delete the corresponding texture samples and texture object when finished.

Now we need to replace the final texture sample with the actual border itself.

And finally, assuming you want the border parameters for the drop shadow border material function (Which you absolutely more than likely do)–this is a very tedious step.

First, create the following parameters that will be fed into the border samples
(Make sure the inputs are the correct type, color is a vector 3, and the rest are scalars):

Now the tedious part, you need to hook these inputs into EVERY sample, including the final border itself:

Speaking of performance, this likely is alot heavier because it is drawing the border 17 times with logic (a texture sample will always be cheaper).

As always with optimization, if it runs fine, then use it.

Great for confirmation widgets (Which is why i created it)

1 Like