Issue with Gradient Visibility

Bug Reports Studio Bugs
,
#1

I am writing to report an issue I’ve encountered with gradient visualization in a button within my Roblox game. The button is designed with two gradients to indicate its state: a green gradient for when it’s active, and a grey gradient to show it’s deactivated.

The problem occurs when the game starts. The script is set to enable the GreenGradient and disable the GreyGradient, indicating the button should be active. However, the green gradient fails to appear. Interestingly, if I first enable both gradients and then disable the GreyGradient, the GreenGradient appears as expected.

local GreenGradient = script.Parent:WaitForChild("GreenGradient")
local GreyGradient = script.Parent:WaitForChild("GreyGradient")

function issue() -- Intended to show the green but doesn't work
	GreenGradient.Enabled = true
	GreyGradient.Enabled = false
end

function otherWay() -- This correctly shows the grey gradient
	GreyGradient.Enabled = true
	GreenGradient.Enabled = false
end

function getGreenToWork() -- Workaround to get the green gradient to appear
	GreenGradient.Enabled = true
	GreyGradient.Enabled = true
	GreenGradient.Enabled = true
	GreyGradient.Enabled = false
end

issue() -- This should activate the green gradient but does not

Screenshot shows the Enabled property set to true, but the green gradient is not being displayed duing run time.

image
image1020×488 107 KB

Sample place:
GradientIssue.rbxl (62.3 KB)

3 Likes
#2

I’ve encountered this issue as well. It seems that you can only have one gradient as a child of a UI element.

A workaround is either adjusting the properties of one gradient or creating another frame with the second gradient parented to it. You can then modify the transparency property of the frame and position it on top of the frame where you want the gradient to appear.

#3

Hi @CrazySnoopylove @NotFrindow - thank you for reporting this issue. We are hoping to make some exciting announcements about the availability of StyleSheets soon, which should gracefully resolve this issue.

With styling, you can create multiple button styles and use GuiState signaling to switch between those styles.

As @NotFrindow mentioned, this approach is equivalent to just having one UIGradient and changing its properties.

3 Likes