How can I make my GUI look like this

  1. What do you want to achieve?
    A drop shadow look on a transparent UI button and its text

  2. What is the issue?
    Trying to put a Frame behind the UI doesnt work because you can still see it through the transparent one

  3. What solutions have you tried so far?
    I’ve tried using 2 frames for the shadow, one on the bottom and one on the side, but they dont always line up with aspect ratios and its just messy.

So as you can see in the images theres a transparent button with a drop shadow on the text and the button
image
image

image
Here is a flowchart on how I replicated the effect:

  • Insert a frame and size it how you want.
  • Insert another frame and set it’s size to: {1,0},{0,ShadowOffset} and it’s position to {0,ShadowOffset},{1,0}
    Where ShadowOffset is the offset for the shadow you want, preferably 2 or 3.
  • Insert another frame and set it’s position to: {1,0},{0,ShadowOffset} and it’s size to {0,ShadowOffset},{1,0}
    (NOTE THAT I SWITCHED THE SIZE AND POSITION!! READ IT CAREFULLY!)
  • Ensure that both the new frames are colored black and has some transparency of 0.25.
    After that, you can insert your text, add a shadow to it and you’re all set.
1 Like

Is there a way to make them not collide when they meet in the corner
like one shorter than the other
image

Yeah but I think it’s best if you practice and do it yourself so that you would actually learn something other than just getting a full baked meal.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.