# Use a color gradient material for entities

**URL:** <https://community.cesium.com/t/use-a-color-gradient-material-for-entities/5654>\
**Category:** CesiumJS\
**Created:** [June 15, 2017, 3:17pm UTC](https://community.cesium.com/t/use-a-color-gradient-material-for-entities/5654 "2017-06-15T15:17:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joseph.ryle](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@joseph.ryle](https://community.cesium.com/u/joseph.ryle)\
**Post date:** [June 15, 2017, 3:17pm UTC](https://community.cesium.com/t/use-a-color-gradient-material-for-entities/5654/1 "2017-06-15T15:17:25Z")

</div>

Is there a way to use a color gradient as the material for an entity?

I see that canvases are allowed as input for the material, but is that referring to an html canvas element with the background specified as the color?

Either way, I cannot get the entity to display a color gradient. What I've been doing instead is drawing a series of the same shape, one atop another, and specifying the transparency and the color throughout the process. This achieves a gradient-like appearance, but it may be at the cost of performance. Here's my code for that:

function addEllipse (semiMinorAxis, semiMajorAxis, x, y, rotation) {  
&nbsp;&nbsp;&nbsp;&nbsp;var red, green, blue, opacity;  
&nbsp;&nbsp;&nbsp;&nbsp;var axisRatio;  
&nbsp;&nbsp;&nbsp;&nbsp;var shapeCount = semiMajorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;var minorAxisStep = semiMinorAxis / semiMajorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;var majorAxisStep = semiMajorAxis / semiMajorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;var newSemiMajorAxis = semiMajorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;var newSemiMinorAxis = semiMinorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;for(i = 0; i \< shapeCount; i++) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axisRatio = newSemiMajorAxis / semiMajorAxis;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(axisRatio \>= 0.75) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;red = 0.03;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;green = 0.06;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blue = 0.12;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity = 1.8 / shapeCount;  
&nbsp;&nbsp;} else if(axisRatio \>= 0.33) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;red = 0.06;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;green = 0.12.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blue = 0.06;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity = 3.6 / shapeCount;  
&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;red = 0.12;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;green = 0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blue = 0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity = 5.4 / shapeCount;  
&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var testMaterial = new Cesium.Color(red, green, blue, opacity);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position : Cesium.Cartesian3.fromDegrees(x, y),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ellipse : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;semiMinorAxis : newSemiMinorAxis,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;semiMajorAxis : newSemiMajorAxis,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation : Cesium.Math.toRadians(rotation),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outline : true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outlineColor : Cesium.Color.WHITE,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outlineWidth : 4,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material: testMaterial  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newSemiMinorAxis -= minorAxisStep;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newSemiMajorAxis -= majorAxisStep;  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [June 16, 2017, 6:29pm UTC](https://community.cesium.com/t/use-a-color-gradient-material-for-entities/5654/2 "2017-06-16T18:29:58Z")

</div>

Hi there,

I think the most performant way to get a gradient material would be to use an image material. You can create a gradient image and apply it like a texture: [http://cesiumjs.org/tutorials/Visualizing-Spatial-Data/](http://cesiumjs.org/tutorials/Visualizing-Spatial-Data/)

Hope that helps,

- Rachel

---

<div class="post-metadata">

**Author:** ![markchagers](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/markchagers/32/4134_2.png) [@markchagers](https://community.cesium.com/u/markchagers)\
**Post date:** [March 1, 2021, 11:05am UTC](https://community.cesium.com/t/use-a-color-gradient-material-for-entities/5654/3 "2021-03-01T11:05:23Z")

</div>

That link points to the general code examples page, and there is no example called Visualizing-Spatial-Data, has this been removed?