JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<div class="gradient-1"></div>
<div class="gradient-2"></div>
<div class="gradient-3"></div>

CSS

.gradient-1 { 
    background-image: -moz-radial-gradient(circle farthest-side, blue, white);
    background-image: -webkit-gradient(radial, center center, 0, center center, 95, from(blue), to(white)); 
} 

.gradient-2 { 
    background-image: -moz-radial-gradient(left, circle farthest-side, blue, white);
    background-image: -webkit-gradient(radial, left center, 0, left center, 90, from(blue), to(white)); 
} 

.gradient-3 { 
    background-image: -moz-radial-gradient(80% 50%, circle closest-side, white, blue);
    background-image: -webkit-gradient(radial, 80% 50%, 0, 80% 50%, 38, from(white), to(blue));
}
div[class^='gradient'] {
    height: 150px;
    width: 90%;
    margin: 30px auto;
}