Pure CSS glass sphere

dabblet.css

.glass {
	background-image:
	  radial-gradient(circle closest-side, rgba(167, 162, 162, 0.33), rgba(0, 0, 0, 0.62));
	background-size: 100%;
	border-radius: 50%;
	position: relative;
}
.glass::before {
 	position: absolute;
	width: 56%;
	height: 26%;
	top: 4%;
	left: 22%;
	border-radius: 50%;
	background-image:
	  linear-gradient(to bottom, rgba(231, 231, 231, 0.12), rgba(30, 30, 30, 0.16));
	content: '';
}
.glass::after {
 	position: absolute;
	width: 38%;
	height: 19%;
	bottom: 3%;
	left: 31%;
	border-radius: 50%;
	background-image:
	  linear-gradient(to bottom, rgba(93, 93, 93, 0.06), rgba(0, 0, 0, 0.18));
	content: '';
}

/*
 * Presentation
 */

html {
	height: 100%;
}
body {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#ball {
	width: 420px;
	height: 420px;
	background-color: red;
	border-radius: 50%;
}
#ball > img {
	width: 300px;
	height: 300px;
	margin: 60px;
	position: absolute;
}
.glass {
	width: 100%;
	height: 100%;
}

dabblet.html

<div id="ball">
  <img src="http://troubled.pro/img/octocat.svg">
  <div class="glass"></div>
<div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

View dabblet: http://dabblet.com/gist/418a090ab700d5df28ae