JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<p><strong>Ellipse</strong></p>
<div id="grad1"></div>

<p><strong>Circle:</strong></p>
<div id="grad2"></div>

CSS

#grad1 {
    height: 40px;
    width: 100%;
   background: -webkit-radial-gradient( #eee, #ddd, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(  #eee, #ddd, #ccc); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(  #eee, #ddd, #ccc); /* For Fx 3.6 to 15 */
    background: radial-gradient(  #eee, #ddd, #ccc); /* Standard syntax (must be last) */
}

#grad2 {
    height: 40px;
    width: 100%;
    background: -webkit-radial-gradient(circle, #eee, #ddd, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, #eee, #ddd, #ccc); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, #eee, #ddd, #ccc); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, #eee, #ddd, #ccc); /* Standard syntax (must be last) */
}