CSSで球体をつくる

DEMO

SCSS

body {
    background: #8d8e90;
}

.adjust {
    float: left;
    margin: 50px 20px;
}

.ball {
    position: relative;
    border-radius: 50%;
    width: 100px; height: 100px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, .1);
    
    &.red {
        background: radial-gradient(at 30% 30%, #e43d3d, #870101);
    }
    
    &.green {
        background: radial-gradient(at 30% 30%, #5afc00, #1f8100);
    }
    
    &:after {
        display: block;
        position: absolute;
        top: 18%; left: 18%;
        border-radius: 50%;
        width: 20%; height: 20%;
        content: "";
        background: rgba(255, 255, 255, .1);
        -webkit-filter: blur(10px);
            -ms-filter: blur(10px);
                filter: blur(10px);
    };
}

HTML

<div class="ball red adjust"></div>
<div class="ball green adjust"></div>

ちょいとばかし解説

CSS3のradial-gradientをつかって球体のように見せています。
after要素で光沢を入れたり、若干シャドウをかけたりしてますが、そこらへんは無くてもいいかもしれません。

今回は以上です。