4 side color gradient background

What is the best approach to having 4 side color gradient background in PlayCanvas (every color on 4 corners)?
I would like to have it work with desktop and mobiles. It would be best if it would be not as a real image which could be too heavy for the web project. I`ve thought about some parametric/code approaches.

If 4 color gradient is too complicated then I would be happy also to have 2 color background.

Are you talking only about the cube or about all models in general? Maybe you could use the default Blender cube and give it different materials on each side/face? Then you could easily assign suitable materials in the editor, if you meant skybox, then you will need a custom shader.

Hi @mdesign,

Take a look at this example project to see how you might approach procedurally creating a gradient texture and then applying it to a material. That material could then be applied to an image element that is stretched across the screen:


I hope this is helpful.


@Newbie_Coder @eproasim
I would like to have that gradient as a background of a scene.

Could you tell me how to set that gradient as a flat background of the scene? I want the same gradient as you posted but as a flat background for the whole scene to see that background underneath 3d objects. It should change size responsively to fit it to device height, and width (it should fill 100% of width and height).

Hi @mdesign,

Here is a quick and dirty example using layers to get what I think you’re looking for:


You’ll probably want to fuss around with your own setup to get something that’s a little more straightforward, but it should get you started.


I love it :slight_smile: that’s exactly what I`ve looked for. Thanks a lot.

1 Like