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: -webkit-radial-gradient(circle farthest-side, blue, white);
    background-image: -moz-radial-gradient(circle farthest-side, blue, white);
    background-image: -o-radial-gradient(circle farthest-side, blue, white);
    background-image: -ms-radial-gradient(circle farthest-side, blue, white);
    background-image: radial-gradient(circle farthest-side, blue, white);
} 

.gradient-2 { 
    background-image: -webkit-radial-gradient(left, circle farthest-side, blue, white);
    background-image: -moz-radial-gradient(left, circle farthest-side, blue, white);
    background-image: -o-radial-gradient(left, circle farthest-side, blue, white);
    background-image: -ms-radial-gradient(left, circle farthest-side, blue, white);
    background-image: radial-gradient(left, circle farthest-side, blue, white);
} 

.gradient-3 { 
    background-image: -webkit-radial-gradient(80% 50%, circle closest-side, white, blue);
    background-image: -moz-radial-gradient(80% 50%, circle closest-side, white, blue);
    background-image: -o-radial-gradient(80% 50%, circle closest-side, white, blue);
    background-image: -ms-radial-gradient(80% 50%, circle closest-side, white, blue);
    background-image: radial-gradient(80% 50%, circle closest-side, white, blue);

}
div[class^='gradient'] {
    height: 150px;
    width: 90%;
    margin: 30px auto;
}