Live Code Editor Version 2.0

Gradient 9 RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            div{
                float : left;
                width: 200px;
                height: 200px;
                margin: 10px;
                color: #fff;
            }
            #div1{
                background : radial-gradient(circle closest-side, red, blue);
                background : -moz-radial-gradient(circle, closest-side, red, blue);
                background : -webkit-radial-gradient(circle, closest-side, red, blue);
                background : -o-radial-gradient(circle, closest-side, red, blue);
            }
            #div2{
                background : radial-gradient(circle farthest-side, red, blue);
                background : -moz-radial-gradient(circle, farthest-side, red, blue);
                background : -webkit-radial-gradient(circle, farthest-side, red, blue);
                background : -o-radial-gradient(circle, farthest-side, red, blue);
            }
            #div3{
                background : radial-gradient(circle closest-corner, red, blue);
                background : -moz-radial-gradient(circle, closest-corner, red, blue);
                background : -webkit-radial-gradient(circle, closest-corner, red, blue);
                background : -o-radial-gradient(circle, closest-corner, red, blue);
            }
            #div4{
                background : radial-gradient(circle farthest-corner, red, blue);
                background : -moz-radial-gradient(circle, farthest-corner, red, blue);
                background : -webkit-radial-gradient(circle, farthest-corner, red, blue);
                background : -o-radial-gradient(circle, farthest-corner, red, blue);
            }
        </style>
    </head>
    <body style='width: 500px'>
        <div id='div1'>closest-side</div>
        <div id='div2'>farthest-side</div>
        <div id='div3'>closest-corner</div>
        <div id='div4'>farthest-corner</div>
    </body>
</html>