JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gradient css3"><span>css3</span></div>
<div class="gradient svg"><span>svg</span></div>

CSS

.gradient{
    width:14em;
    height:14em;
    border:2px solid black;
    background:dimgray;
    display:inline-block; 
    line-height:14em;        
}
.gradient span{
    text-align:center;
    color:white;
    font-size:1.2em;
    display:inline-block;
    width:100%;
    text-shadow:0 1px 2px black;
}
.gradient.css3{
    background-image:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
    background-image:   -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
    background-image:     -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
    background-image:        radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);  
}
.gradient.svg{
    background-image:url('data:image/svg+xml,%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3CradialGradient%20id%3D%22g%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20stop-opacity%3D%22.3%22%20stop-color%3D%22white%22%20offset%3D%22.1%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20stop-opacity%3D%220%22%20stop-color%3D%22white%22%20offset%3D%22.9%22%2F%3E%0A%20%20%20%20%20%20%3C%2FradialGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E');
}