Drop-Shadow effect for UI elements

General rule: if you can see a drop shadow, it’s too harsh.

2 Likes

Sorry for the bump, but nowadays drop shadows are part of the “normal” design language developers use. let’s take the developer forum for example:
image
As I am making this comment right now there is a shadow in here.

this is not possible to do in roblox and limits me and (probably) other developers and UI Designers from making cool creations such as depth in UI (Like the devforum example I just gave, it looks like the writing card is infront of the background). In conclusion, for roblox to keep with the current design language (Example,More Details) it needs to add drop shadows.

8 Likes

This is still feasible by doing the same thing as you would do when making rounded corners in Roblox.

9 slicing a black gradient circle (center full black, borders alpha) would achieve this pretty well.

But, it would be much simpler and more convenient to have a dedicated property for it.

Like instead of needing to make sure everything scales correctly by manually creating the drop shadow, you could tick a “DropShadow” property, which would then bring up sub-properties for developers to edit.

2 Likes

True, but the advantage of HTML is that you don’t need a massive amount of properties visible when not required. You can either have an object with tens of effects, or just a text with a custom font. If they were to add all of the effects that we want, they would require a separate drop down.

Problem

As a Roblox developer, it is currently impossible to create drop shadows for UI in Roblox Studio. Currently, what I have to do is create text or image, generate it’s shadow in external programs, download it, and upload it to Roblox. The problem with this is that if I don’t like the outcome, I’d have to do the whole process again. While this may be understandable within a couple of tries; as a UI Designer, it would be extremely time-consuming to download and upload a drop shadow image when I have to edit it countless times until I find it is perfect. Additionally, it would be astounding if drop shadows would also have sub-properties such as distance, opacity, angle. This feature would really benefit me personally as a developer and many other developers who are willing to utilize this feature. Currently, I find myself uploading a lot of images to work around the lack of UI features and it just means that players have to load more images into the game.

If Added

If this issue is addressed, it would improve my development experience because not only would it be a lot more efficient to be able to instantly create a shadows right in Studio, but also being able to customize drop shadows can significantly improve the cosmetic part of UI designing. It can make way for amazing designs to be created!

Use Case

16 Likes

I would like to bump this topic as it is very beneficial for many developers on UI and such.

Pretty straight forward with this reply, add this feature as it is crucial for me and other UI designers that also support this and is something that would make games a lot more beautiful and creative with shapes and shadows all over the place.

Here is an example of what a shadow for a UI frame looks like right now for modern UI designers:

Image:

Screenshot (2459)

This is pretty nice in my opinion with a variety of choices to choose from for the complex UI shapes and shadows, but I don’t think other UI shapes that Roblox will provide for us developers will be a thing for quite some time.

Also, shadows for UI Elements is something that I wanted for many years now and would be nice to have because it would make UI structures more realistic and much more easier for UI designers that have to use a duplicate/separated frame that has a darker color and then have it transparent and make the zindex lower than the original frame that needs a shadow.

In the end, I support this. :+1:

2 Likes

I fully support implementing things from CSS into roblox. Especially the box shadow’s property that allows it to be blurred, among other things. Full support.

2 Likes

Im going to bring up this issue again since as roblox introduces new UI elements such as UIStroke and UICorner a new UI element (I would prefer this over a physical property) for allowing us to give shadows to UI objects would be hugely appreciated and would allow roblox to continue to improve their fairly poor (yet improving) UI editing tools.

28 Likes

Bumping this thread again. We’ve been patiently waiting :slight_smile:.

Such an easy alley-oop of a feature to improve Roblox UI

4 Likes

Still waiting for box shadows! Manual methods work but are pretty tedious.

3 Likes

For a good looking effect I used a UI gradient and set it accordingly,
image