How to set a gradient colored background?

The Godot Q&A is currently undergoing maintenance!

Your ability to ask and answer questions is temporarily disabled. You can browse existing threads in read-only mode.

We are working on bringing this community platform back to its full functionality, stay tuned for updates.

godotengine.org | Twitter

+1 vote

Hello all,

I am pretty new to godot and graphic engine overall. I am trying to create a fix background for a mobile app project with a gradient color (from white to blue). I was thinking of doing this with a ColorRect node but it does not seem to have this as an option. I found the Gradient object class in godot doc but I cannot find how to apply it to the ColorRect. Any suggestion on how to do this ?

in Engine by (16 points)

I forgot to mention that the mobile app I work on only uses 2D interfaces.

by (16 points)

2 Answers

+1 vote
Best answer

Hi,
you can make a setup as follows

  • Camera
    -- MeshInstance

MeshInstance ->
Mesh: quad
Material: SpatialMaterial
flags: unshaded
flags: fixed size
parameters: Depth Draw Mode > never
parameters: Billboard > enabled
Albedo: Texture > your gradient

then make the quad as large aas the viewport of the camera
this should do it

by (4,088 points)
selected by

Ok. That's definitly an approach I would not have thought of. Not sure I understand the logic behind it either though.
My app is a 2D interface. Why would you go for using a camera?
Otherwise, you suggest using the gradient I want as a texture. So, I would need to make a texture outside of godot and import it? Would that work in a ColorRect node as well? Is there a way in godot to create a texture that applies the wanted gradient described in my original post?

Thanks a lot for your help !

by (16 points)

When its a 2d Interface then just use TextureRect. There you can load a texture or create a new gradient texture with a new gradient.
Check expand on the textureRect for upscaling.

by (4,088 points)

TextureRect and creating a new gradient texture in it works great ! Thanks a lot for your help klaas !

by (16 points)

This helped me, thanks!

by (51 points)
+3 votes

The comment by @klaas deserves to be an answer for those of us wanting to have a simple gradient background behind a GUI of Control and/or Node2D nodes:

When its a 2d Interface then just use TextureRect.

Steps to do this:

  1. Add aTextureRect node to fill the area you want the gradient in
  2. Click to add a "New GradientTexture1D" or GradientTexture2D
  3. Set the "to" and "from" colors as you like

Here's an example:

Gradients on TextureRect in the editor

by (44 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.