radial-gradient-sizes

by VIvek Vaishnav

HTML

<body>
    <div class="container">
    <div class="box gradient1"><span>Farthest Corner</span></div>
    <div class="box gradient2"><span>Farthest Side</span></div>
    <div class="box gradient4"><span>Closest Corner</span></div>
    <div class="box gradient3"><span>Closest Side</span></div>
    </div>    
    </body>

CSS

.container{max-width:500px;height: 300px; text-align:center;color: #fff;}
    .box{width:45%;height: 48%; float: left; margin: 2px;}
    
    .gradient1{ background: radial-gradient(circle farthest-corner, white,red);}
    .gradient2 {background: radial-gradient(circle farthest-side, white,red);}
    .gradient3{background: radial-gradient(circle closest-side,white,red);}
    .gradient4 {background: radial-gradient(circle closest-corner,white,red);}