Vertical gradient

Godot Version

3.6 stable

Question

Is there an option to select a vertical gradient in "GradientTexture"?

Was trying to style my buttons with a vertical gradient but i cant find any option to change it from horistontal to vertical direction (from top to bottom or bottom to top). Se screenshot below:

Thanks in advance

You can use a GradientTexture2D

Also tried with GradientTexture2D.

Where do you change it to vertical?

You can change the gradient’s start and end points with the square and diamond gizmos

1 Like

Thanks!

Those square and diamond gizmos where super tiny.

However, now i can no longer change border, corner radius, shadow etc of the button when its a StyleBoxTexture (Instead of StyleBoxFlat)and GradientTexture2D. Or how do change it now when my button has a gradient? It seems like StyleBoxFlat cant have a gradient?

Yeah, StyleBoxTexture doesn’t have the border, corner radius, etc properties (since you could put those onto the texture itself) and StyleBoxFlat doesn’t have a gradient option.

Not sure what you mean by “since you could put those onto the texture itself”.

How do I add rounded corners, border and shadow to my gradient button then? Cause I find no way to “put those onto” my gradient button (StyleBoxTexture and GradientTexture2D)

Please explain.

I meant that you edit the .png file that you use with a styleboxtexture.

If you want something like this: You’re going to need to do some layering.

Stylebox for the two PanelContainers:

Stylebox for the Button:

You need the PanelContainer as a parent of Button so that its corners don’t stick beyond the rounded corners. You need the second PanelContainer as a sibling to the first, lower down, so that the Buttoncorners don’t stick into the outline.

When you click on the white outline and the button doesn’t respond :sob:

1 Like

We all have to make sacrifices. But fair point:

Add another button. on top with a StyleBoxEmpty.

image

Also, both the second PanelContainer and the second Button need minimum sizes set.

Then you just link the click code to the second button.


However, after all this work, you’d be better off just using a texture that’s the size and gradient you want.

1 Like

and in 3.6 the property is called rect_min_size

1 Like

Thanks for catching the version @paintsimmon. I missed that.

1 Like

@dragonforge-dev

Wow! :grinning_face_with_smiling_eyes: That was alot of work for achiving that. Would have been much easier and faster if Godot just had an option for gradient on the StyleBoxFlat or the button. Maybe there is a plugin for this? Or is this fixed in newer versions of godot?

This is not fixed later, anything more complicated than gradients will need to be an image or multiple nodes sadly.

This was just me having fun before bed trying to solve your problem.

You could conceivably make your own using this method. Create the button, clear out the text (maybe using spaces to get the size you want - or playing with the minimum size values), take a screen shot, then use that as the texture. You’ll have to import the screen shot into GIMP or Krita and turn the corners transparent, but that’s easy enough to do.

I was using the latest version of Godot, 4.6, in my example.

You could write your own plugin for it. Or just a custom script that extends button?

1 Like

Or make it once and save the whole thing as a custom scene you can reuse.

Thanks for your efforts guys!

I think the Godot UI has room for improvements. Is there any dedicated forum thread for leaving feedback and suggestions on the Godot software?

You can find more information about that here:

1 Like