# Gradient material

**URL:** <https://forum.babylonjs.com/t/gradient-material/50596>\
**Category:** Questions\
**Tags:** material\
**Created:** [May 16, 2024, 10:02am UTC](https://forum.babylonjs.com/t/gradient-material/50596 "2024-05-16T10:02:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nimotea](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@nimotea](https://forum.babylonjs.com/u/nimotea)\
**Post date:** [May 16, 2024, 10:02am UTC](https://forum.babylonjs.com/t/gradient-material/50596/1 "2024-05-16T10:02:41Z")

</div>

## Is there an easy way to create a gradient barrier?

> I’m new to babylon js and need some help.

> I need to create a light barrier to emphasise the building area like this.
> 
> ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/e/2ec419b02c1ac4852074c1d9a9a4ebd292b3b3d5.jpeg)

> I have do some research like this. [playground](https://playground.babylonjs.com/#5T8G3I#193). but it’s a bit too complicated. I’m going to use CreatePolygon method to do this job. Here’s some effects.
> 
> ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/b/db53821220ced621fc8d4cae7e911927eb388e97.jpeg)

> As with the effect above, I’m having trouble with the gradient color material, can someone give me help？

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [May 16, 2024, 11:20am UTC](https://forum.babylonjs.com/t/gradient-material/50596/2 "2024-05-16T11:20:52Z")

</div>

Hello and welcome 🙂

There are several ways.  
Here is one :

- Create a [Gradient Alpha in the Node Material Editor](https://nodematerial-editor.babylonjs.com/#2KB5FF)
- Load it in your scene ([Playground](https://playground.babylonjs.com/#4U4QH9#20))

And here you go :

 ![Screenshot from 2024-05-16 13-17-43](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/8/c82bd1bbe4e436b53e6e58efaa25c741d70ade6b.png)

* * *

Of course I’m sure there are many other ways to go…

* * *

++  
Tricotou 🙂

---

<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:** [May 16, 2024, 1:32pm UTC](https://forum.babylonjs.com/t/gradient-material/50596/3 "2024-05-16T13:32:25Z")

</div>

Greased line could help with this I guess cc @roland

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 16, 2024, 7:14pm UTC](https://forum.babylonjs.com/t/gradient-material/50596/4 "2024-05-16T19:14:38Z")

</div>

Hello! Welcome to babylon.js!

You could use `GreasedLine` with an `opacityTexture`:

> **[Babylon.js Playground](https://playground.babylonjs.com/#P4G7Q9)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

This PG uses ribbon mode but you can opt for camera facing mode too.

Read the DOCS:

[https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased\_line](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line)

---

<div class="post-metadata">

**Author:** ![nimotea](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@nimotea](https://forum.babylonjs.com/u/nimotea)\
**Post date:** [May 17, 2024, 5:40am UTC](https://forum.babylonjs.com/t/gradient-material/50596/5 "2024-05-17T05:40:27Z")

</div>

Thanks for all the suggestions, I’ve only recently started to learn about babylonjs, and don’t know those features yet. I think your suggestions will be very helpful. 👍