UI Shadow not layering properly

Hello, I’ve been implementing the new UIShadow UI into my game, but I’m running into a frustrating issue that I’m not is a bug or just not a possible feature.

UI Shadow Example:

Indicator of where I want the shadow to exist:

What happens if I add in Box1 after Box2 instead:

UI Reference:

From the example images above, I have 2 UI Frames inside a parent Frame. The green box is Box1 and the blue one is Box2. Both Frames exist on ZIndex: 1 and both Frames have a UIShadow that exists on ZIndex: -1. Currently, whichever UI object that was added last, that has a UIShadow, just overlays the other UI in the same even if they exist on the same ZIndex. In the 3rd image you can see that I deleted Box1 then added it back and now the UIShadow overlaps Box2.

I’m trying to find out if there is a fix to this that I am not seeing. Is there a way to make the UI Shadows exist under both frames so that the shadows don’t overlap either frame?

I’ve already tried lowering the ZIndex of the UIShadow that is overlapping the Frame but it didn’t change anything. I would prefer not adding another UI underneath both of the frames to mimic the UIShadow because I have a tab system in my game that will highlight different tabs frequently and the UIShadows would get very complicated.

This is my first forum post, so I apologize is I didn’t follow proper etiquette or forgot to add something.

2 Likes


Like this?

1 Like

have two blue squares on the bottom, one with a shadow and one without

1 Like

Yeah like that. Were you able to do that without adding extra frames?

1 Like

This was just an example. I have a page with a tab system, the blue square represents a big window and the green square represents a tab.

1 Like

Nope, it would be impossible with just 2.
ThinkOutsideTheBox.rbxl (63.2 KB)

1 Like

ur only solution is to just layer a shadow png on top of the white frame

That is just a workaround that adds more overhead to your UI hierarchy. If you are already using UIShadow, it should handle the depth correctly unless your ZIndex setup is fundamentally broken for the parent containers.

he rejected the only solution involving uishadows, so im just giving him the only other alternative

That is not a rejection of the solution, it is just pointing out that your ZIndex setup is likely why it is failing in the first place. If you have to use extra assets for shadows, you are just adding unnecessary overhead.

Check your ZIndexBehavior and how the parent containers are layered. If a child element’s shadow is being clipped or rendered behind other elements despite having a higher ZIndex, it is usually because the parent container has its own rendering bounds or a conflicting ZIndex setting that overrides the expected behavior.

The number of combinations does not matter if you are mismanaging how ZIndexBehavior handles sibling layers versus parent containers. If the shadow is being clipped, it is a hierarchy or bounds issue, not a lack of permutations.

If you are using ZIndexBehavior.Global, ZIndex is absolute across the whole UI, but if it is set to Sibling, it only respects order relative to other elements in that specific container. If your shadow is inside a frame that has ClipsDescendants enabled or is being layered by a parent with a lower ZIndex, no amount of tweaking child indices will make it pop out correctly. Check the properties of every parent object in that hierarchy.

1 Like

sorry man i understand what u mean now

No worries. Just fix the hierarchy and you should be fine.