# How should i use ColorGradient?

**URL:** <https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197>\
**Category:** Questions\
**Tags:** material\
**Created:** [July 3, 2020, 12:30pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197 "2020-07-03T12:30:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [July 3, 2020, 12:30pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/1 "2020-07-03T12:30:06Z")

</div>

Hi everyone,

is it possible to help me to know how can i use colorGradient, because when i use in this way:

var gradientMaterial = new BABYLON.GradientMaterial(“grad”, scene);  
gradientMaterial = new BABYLON.ColorGradient( 0.5, BABYLON.Color3(0,0,1);

i got the error, how can i use it?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 3, 2020, 12:37pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/2 "2020-07-03T12:37:56Z")

</div>

I think this should help: [Gradient - Babylon.js Documentation](https://doc.babylonjs.com/extensions/gradient)

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [July 3, 2020, 12:54pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/3 "2020-07-03T12:54:57Z")

</div>

Hi,  
I don’t want to have a gradient on one shape, i have 100 cubes and each cube has a grade number between 0 to 1 , i just want to know how can i make a gradient between these cubes.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 3, 2020, 1:05pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/4 "2020-07-03T13:05:29Z")

</div>

You can try something like this:

[https://playground.babylonjs.com/#US24QY](https://playground.babylonjs.com/#US24QY)

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [July 3, 2020, 1:13pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/5 "2020-07-03T13:13:36Z")

</div>

Thank you so much for helping, But the problem is each cube has a specific grade, and i must define a specific grade on each of them.

---

<div class="post-metadata">

**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:** [July 3, 2020, 1:42pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/6 "2020-07-03T13:42:45Z")

</div>

The thing is gradient material works inside on a single mesh based on its local position not a world space one.

So either you create your own material in node material or shader material or you need some information per meshes relative to the gradient.

The last option is to create one mesh with all the cubes inside.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 3, 2020, 3:01pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/7 "2020-07-03T15:01:16Z")

</div>

Do you mean this:

[https://playground.babylonjs.com/#US24QY#1](https://playground.babylonjs.com/#US24QY#1)

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [July 3, 2020, 5:33pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/8 "2020-07-03T17:33:00Z")

</div>

i have a forEach loop and in the loop i have a mesh factory , i want to give a specific gradient to each cube.

async function fetchUsers() {  
const response = await fetch("./BlockModelWithGrade.json");  
const cubes = await response.json();  
cubes.forEach(function ( c ) {

```
  const cube = new BABYLON.MeshBuilder.CreateBox(
    c.key,
    { height: c.Yinc, width: c.Xinc, depth: c.Zinc },
    scene
  );

  const color1 = new BABYLON.Color3(0, 0, 1);
  const color2 = new BABYLON.Color3(0, 1, 1);
  const mat = new BABYLON.StandardMaterial("mat", scene);
  mat.diffuseColor = new BABYLON.Color3.Lerp(color1, color2, c.G);

  cube.position.x = c.X;

  cube.position.y = c.Y;

  cube.position.z = c.Z;
});

```

}

fetchUsers();

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [July 3, 2020, 6:30pm UTC](https://forum.babylonjs.com/t/how-should-i-use-colorgradient/12197/9 "2020-07-03T18:30:44Z")

</div>

thank you so much i find the way with the aid of this example.