<style>
.icon {
background: #90C7DE;
width: 256px;
height: 256px;
border-radius: 38px;
overflow:hidden;
border: solid 6px #666;
position: relative;
-webkit-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
z-index: 10;
}
.icon .gloss {
background: #56ABCB;
height: 144px;
width: 100%;
overflow: hidden;
position: relative;
z-index: 5;
-webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
-moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
border-top-right-radius: 170px 20px;
border-top-left-radius: 170px 20px;
position: absolute;
bottom: 0px;
}
.icon .text {
font: bold 200px Tahoma;
text-align:center;
z-index: 200;
position: relative;
color: white;
}
</style>
<div class="icon">
<div class="gloss"></div>
<div class="text">in</div>
</div>