What is Radial Gradients in SVG?


Posted On: Feb 22, 2018


radialGradient is an element of SVG that allows authors to define radial gradients to fill or stroke graphical elements.It produces a ring (or rings) of color instead of stripes.Here is sample code to define an ellipse with a radial gradient from blue to red:

<svg height="150" width="500">


<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(0,0,255);

stop-opacity:0" />

<stop offset="100%" style="stop-color:(255,0,0);stop-opacity:1" />



<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />


    Related Questions

    Please Login or Register to leave a response.

    Related Questions

    SVG Interview Questions

    What is SVG Stands for?

    SVG stands for Scalable Vector Graphics...

    SVG Interview Questions

    How to Add SVG in HTML?

    You can add SVG on your webpage or HTML by using following any of following ways. Using an &lt;object&gt; Tag Using an..

    SVG Interview Questions

    List few advantages and disadvantages of using SVG?

    Advantages of SVG Highly Scalable Easy to create Smaller in Size Accessible DOM Node-Based API Easier to create very de..