Adding a gradient color to an asphere

Question

I want to add a gradient color to a sphere, currently setting the color:

<a-sphere position="1 1 0" color="#ef2d5e">
            <a-animation attribute="rotation" to="0 360 0" dur="10000" easing="linear" repeat="indefinite">
</a-animation>
</a-sphere>

Demo

How to add a gradient to a sphere? Is there any way.

Answer 1

Try https://github.com/zcanter/aframe-gradient-sky

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<script src="https://rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>

<a-scene>

        <!-- A Sphere -->
        <a-entity geometry="primitive: sphere" material="shader: gradient; topColor: 255 100 100; bottomColor: 100 100 200; offset: 0.0001"  position="0 0 -5"></a-entity>

    </a-scene>