# How to set a gradient on my background **URL:** \ **Category:** Questions\ **Created:** [March 9, 2023, 8:54am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881 "2023-03-09T08:54:22Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Capitaine\_Barbarossa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/capitaine_barbarossa/32/30567_2.png) [@Capitaine\_Barbarossa](https://forum.babylonjs.com/u/Capitaine_Barbarossa)\ **Post date:** [March 9, 2023, 8:54am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/1 "2023-03-09T08:54:22Z")
Hello guys, I’m new to Babylon and it was asked to me to change the background color to a gradient. So I understand I can change the color of the background with : scene.clearColor = new BABYLON.Color3(); but that’s just for one color, not a gradient. I tried : var backgroundMaterial = new BABYLON.BackgroundMaterial(“background”, scene); backgroundMaterial.topColor = new BABYLON.Color3(1, 0, 0); // Rouge backgroundMaterial.bottomColor = new BABYLON.Color3(1, 1, 0); // Jaune backgroundMaterial.useEquirectangularFOV = false; scene.clearColor = backgroundMaterial; but it doesn’t work, my scene appear just black. Any ideas ? (oh and I don’t have to use a skybox and I know I can do it with an image but I have to found how to do it directly with scene.clearColor.) > **[Babylon.js Playground](https://playground.babylonjs.com/#7G0IQW%23228)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Thank you ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [March 9, 2023, 10:00am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/2 "2023-03-09T10:00:58Z")
You can use the gradient material for a mesh and if you use the camera as a parent, you can “fix” it at the same position even if the camera is moved. [gradientColor with HemisphericLight | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#2IFRKC#664) ---
**Author:** ![Capitaine\_Barbarossa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/capitaine_barbarossa/32/30567_2.png) [@Capitaine\_Barbarossa](https://forum.babylonjs.com/u/Capitaine_Barbarossa)\ **Post date:** [March 9, 2023, 10:16am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/3 "2023-03-09T10:16:59Z")
Oh thank you! A little bit weird but I suppose it make it ^^ I thought there was a simpler way with just scene.clearColor but it seems thats not the case. ---
**Author:** ![Capitaine\_Barbarossa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/capitaine_barbarossa/32/30567_2.png) [@Capitaine\_Barbarossa](https://forum.babylonjs.com/u/Capitaine_Barbarossa)\ **Post date:** [March 9, 2023, 11:53am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/4 "2023-03-09T11:53:42Z")
I just dont understand why it cant be simple ? I mean in CSS, you can set up the background color just by saying background: blue, and if you want a gradient you just have to write : background: linear-gradient(…); Here, in Babylon, if you want to change the color you just have to write : scene.clearColor = new BABYLON.Color3(0, 0, 0, 0) but for gradient you cant write new BABYLON.Color3(linear gradient) I dont understand why it cant be simple just for a gradient … ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [March 9, 2023, 12:43pm UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/5 "2023-03-09T12:43:02Z")
The simple answer is that Babylon doesn’t use CSS, it uses WebGL, which is a totally different API. The clearColor parameter is mapped directly to the WebGLRenderingContext.clearColor method [WebGLRenderingContext.clearColor() - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/clearColor), which doesn’t accept a gradient. However, since shaders are very flexible, you can reach a background gradient effect through many methods, one example would be here: [Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#J3FUED#9) ---
**Author:** ![Capitaine\_Barbarossa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/capitaine_barbarossa/32/30567_2.png) [@Capitaine\_Barbarossa](https://forum.babylonjs.com/u/Capitaine_Barbarossa)\ **Post date:** [March 9, 2023, 1:02pm UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/6 "2023-03-09T13:02:26Z")
Thank you very much for all you answers! Very clear and simple to understand for a noob like me! ^^ And sorry for my english, not my maternal language ^^’ ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 9, 2023, 1:18pm UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/7 "2023-03-09T13:18:55Z")
Again, one of these very simple shaders (although not NME) that should find a place in the doc (my opinion). Not sure how this should all be organized, but there’s an entire world around this. It deserves a better structure and accessibility than what we have just now. ---
**Author:** ![KaygNas](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kaygnas/32/34675_2.png) [@KaygNas](https://forum.babylonjs.com/u/KaygNas)\ **Post date:** [August 31, 2023, 3:03am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/8 "2023-08-31T03:03:37Z")
I’m struggling with the problem of setting a gradient background for a button, it looks similar to this question, and there is my solution: [Linear Gradient Background Button | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#BGV7PK#1) ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [August 31, 2023, 10:46am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/9 "2023-08-31T10:46:40Z")
Not sure to understand, your gradient works here ? ---
**Author:** ![KaygNas](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kaygnas/32/34675_2.png) [@KaygNas](https://forum.babylonjs.com/u/KaygNas)\ **Post date:** [September 1, 2023, 1:40am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/10 "2023-09-01T01:40:22Z")
Not exactly work here… I create another PG using 2D GUI to set the background of a scene. [Linear Gradient Scene Background | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#BGV7PK#2) ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [September 1, 2023, 11:16am UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/11 "2023-09-01T11:16:05Z")
What is the result you expect to see? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [September 1, 2023, 7:36pm UTC](https://forum.babylonjs.com/t/how-to-set-a-gradient-on-my-background/38881/12 "2023-09-01T19:36:58Z")
What does not work ? I can see the gradient there ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/3/63a13a71665492f4c5228cde31529e04e7e4ec6a.jpeg) What do you see ?