Moon Glowing Effect CSS.

<style type="text/css">

.sphere{
 position: relative;
 height:200px;
 width: 200px;
 background-color:red;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}

.sphere::after, .sphere2::after{
 background-color: rgba(255,255,255,1);
 content:'';
 height: 40%;
 width: 10%;
 position:absolute;
 top:8%;
 left:14%;
 border-radius:50%;
 transform: rotate(45deg);
}


.sphere2 {
 height:200px;
 width: 200px;
 position: relative;
 background-color:yellow;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}
.sphere2::after{
 background-color: rgba(255,255,255,0.5);
 content:'';
 position:absolute;
 border-radius:50%;
 transform: rotate(45deg);
}

</style>


<div class="sphere">CSS</div>
<div class="sphere2">
<div class="shine"></div>
    jQuery
</div>


Output :)