Adding gradient color to a sphere

Question

I want to add gradient color to the sphere, currently I am 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 do I add gradient to the 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>