JSFiddle - React, Tailwind, and code Playground

by redky

HTML

<div class="box circle"></div>
<div class="box ellipse"></div>
<div class="box px"></div>
<div class="box closest-side"></div>
<div class="box farthest-side"></div>
<div class="box closest-corner"></div>
<div class="box farthest-corner"></div>
<!--
http://www.w3.org/TR/css3-images/#radial-gradients
-->

CSS

.box {
    height: 200px;
    margin: 10px;
    width: 200px;
    float: left;
}
.circle {
    background-image: -webkit-radial-gradient(50% 50%, circle, #faa 10%, #ffa);
}
.ellipse {
    background-image: -webkit-radial-gradient(50% 50%, ellipse, #faa, #ffa 80%);
}
.px {
    background-image: -webkit-radial-gradient(50% 50%, 50px 50px, #faa, #ffa);
}
.closest-side {
    background-image: -webkit-radial-gradient(50% 50%, closest-side, #faa, #ffa)
}
.farthest-side {
    background-image: -webkit-radial-gradient(50% 50%, farthest-side, #faa, #ffa)
}
.closest-corner {
    background-image: -webkit-radial-gradient(50% 50%, closest-corner, #faa, #ffa)
}
.farthest-corner {
    background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #faa, #ffa)
}
/* 
    losest-side, closest-corner, farthest-side, farthest-corner
*/