Snowman

Made with CSS Gradients

by beau

HTML

<div class="snowman">
    
</div>

CSS

.snowman {
    position: relative;
    width: 400px;
    height: 400px;
    background:
       -webkit-linear-gradient(115deg, transparent 48%, brown, #960, brown, transparent 52%),
       -webkit-linear-gradient(60deg, transparent 48%, brown, #960, brown, transparent 52%), 
        -webkit-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -webkit-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -webkit-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%),
        -webkit-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%),
        -webkit-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%)
        ;
    background:
       -moz-linear-gradient(115deg, transparent 48%, brown, #960, brown, transparent 52%),
       -moz-linear-gradient(60deg, transparent 48%, brown, #960, brown, transparent 52%), 
        -moz-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -moz-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -moz-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%),
        -moz-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%),
        -moz-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%)
        ;
    background:
       -ms-linear-gradient(115deg, transparent 48%, brown, #960, brown, transparent 52%),
       -ms-linear-gradient(60deg, transparent 48%, brown, #960, brown, transparent 52%), 
        -ms-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -ms-radial-gradient(50% 50%, circle closest-corner, #333 30%, #999 50%, transparent 50%),
        -ms-radial-gradient(50% 50%, circle closest-corner, #fff 30%, #eee 50%, transparent 50%),
       ...