How to set a gradient colored background?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By quillaur

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 ?

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

quillaur | 2020-09-04 14:04

:bust_in_silhouette: Reply From: klaas

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

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 !

quillaur | 2020-09-04 14:01

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.

klaas | 2020-09-04 14:14

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

quillaur | 2020-09-04 18:27

This helped me, thanks!

anssiko | 2021-02-24 08:33

:bust_in_silhouette: Reply From: jeroenheijmans

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: