Creating CSS3 Radial Gradients

CSSWeb DevelopmentFront End Technology

<p>For Radial Gradients, set color stops. The default shape is Ellipse, but you can also set other shapes like circle. Set at least two color stops for Radial Gradients in CSS.</p><p>Following is the code for creating radial gradients using CSS &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/erQtbuxy" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { &nbsp; &nbsp;font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif; } #radial { &nbsp; &nbsp;height: 200px; &nbsp; &nbsp;width: 200px; &nbsp; &nbsp;background-image: radial-gradient( &nbsp; &nbsp; &nbsp; rgb(255, 0, 106), &nbsp; &nbsp; &nbsp; rgb(2, 0, 128), &nbsp; &nbsp; &nbsp; rgb(0, 255, 42) &nbsp; &nbsp;); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Radial Gradient Example&lt;/h1&gt; &lt;div id=&quot;radial&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>The above code will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/37941/radial.jpg" class="fr-fic fr-dib" width="600" height="266"></p>
raja
Updated on 07-May-2020 11:21:35

Advertisements