Drop-Shadow effect for UI elements

As a Roblox developer, it is difficult to make my UI look aesthetically pleasing with drop shadows. It requires uploading images and making the shadow with a 9-slice frame approach, or for complex shapes you need to upload custom drop shadow images just for those shapes.

I would like for Roblox to have an option to automatically add drop shadows to simple and complex UI shapes. They should have a customizable color, transparency, offset and z-filter. I only need the drop shadows for UI objects myself.

If Roblox is able to address this, it would be easier to get a nice looking drop shadow as aesthetic element for the UI I create on Roblox.

79 Likes

Ohhh, great idea!

This could improve many GUIs.

7 Likes

Literally a black frame with no borders, transparency, slight offset, Z Index

7 Likes

Something like CSS Box-Shadow would be pretty sweet. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

8 Likes

you can do this (along with quite a number of other cool effects) with 9-slice.

1 Like

Step 1.
Clone GUI inside of itself and set the ZIndex -1 to the main one

Step 2.
The clone must be black, including ImageColor3, Stroke and background

Step 3.
Offset it by about 2-5 pixels in any direction

Step 4.
Set Image, Background (and) stroke transparency to about 0.8-0.9

3 Likes

those are some great Ideas for doing this manually. I’ve just been playing with guis for a few days and trying to think of a few extra easy options that devs could use to make better looking guis with studio alone. Making a black frame with .5 transparency still wouldn’t have the nice soft rounding effect on corners and that little bit of fade out at the edges like a real drop-shadow effect would have. but it will work if I really want that drop-shadow.

And I like Userings’ idea of having a corner radius, and my other idea of using vector color gradients.

1 Like

Drop shadows for UI elements in 2015? That is so 1995. Back then, a major UI revamp from Windows 3.1 to Windows 95 included the introduction of sharp rectangular buttons and pseudo-3d shadows.

3 Likes

Still looks better than metro

7 Likes

[quote] those are some great Ideas for doing this manually. I’ve just been playing with guis for a few days and trying to think of a few extra easy options that devs could use to make better looking guis with studio alone. Making a black frame with .5 transparency still wouldn’t have the nice soft rounding effect on corners and that little bit of fade out at the edges like a real drop-shadow effect would have. but it will work if I really want that drop-shadow.

And I like Userings’ idea of having a corner radius, and my other idea of using vector color gradients. [/quote]

What’s your rationale for not using 9-slice?

1 Like

XP that 95 stuff isn’t what i had in mind. more like

1 Like

I’m not against it.

1 Like

Why not let us custom create frames?
Give it a 48x48px picture that becomes all the edges.
It doesnt scale the image. It cuts the edge 16x16 and put it on the top, then cut from 16,0 another 16x16 peice the stretches the top part. You get the point…

This can be done through 8 different images, but to have a simple “FrameImage” property would make it alot smoother.

2 Likes

[quote] Why not let us custom create frames?
Give it a 48x48px picture that becomes all the edges.
It doesnt scale the image. It cuts the edge 16x16 and put it on the top, then cut from 16,0 another 16x16 peice the stretches the top part. You get the point…

This can be done through 8 different images, but to have a simple “FrameImage” property would make it alot smoother. [/quote]

2 Likes

Well that’s a fancy word now isn’t it? XD

2 Likes

It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley:

2 Likes

Imma drop this here for yall because it’s relavant and a good way to make drop shadows, you’re welcome. :slight_smile:

2 Likes

[quote] It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley: [/quote]

Yes yes yes yes yes [size=2]yes yes yes yes[/size] [size=1]yes yes yes yes[/size] [size=1][size=1] I really want this in case you can’t tell[/size][/size]

1 Like

I’ve been trying for an hour to get good looking drop shadows with 9-slice tech. I finally got ok results. I’m not 100% satisfied with the results or with how long it took. Since I brought it up I’m sharing my resources if anyone wants to use them.

1 Like

[quote] It would be neat if we could create a button “collision box” from a black and white bitmap, where the white pixels would capture mouse click/hover, and black pixels wouldn’t.
Circle buttons! :smiley: [/quote]

circle buttons could also be made if Userings idea for corner-radius were to be implemented.

1 Like