JSFiddle - React, Tailwind, and code Playground

by Alarr

HTML

<div class="forGradi"></div>

CSS

.forGradi {
    width: 300px;
    height: 300px;
    margin: 100px;
    background: #333;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 50%;
    box-shadow: 0 8px 15px rgba(0,0,0,.6);
    /*background: radial-gradient(green 30%,yellow,white 10%);*/
    background: radial-gradient(white -20%, green 65%, yellow) repeat scroll 0 0 transparent;
        transition: width 0.5s;
    -moz-transition: width 0.5s; /* Firefox 4 */
    -webkit-transition: width 0.5s; /* Safari and Chrome */
    -o-transition: width 0.5s; /* Opera */
}

.forGradi:hover {
    width: 350px;  
}