CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
}
.big-eye {
margin: 40px 100px;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
z-index: 2;
}
.white {
background: -webkit-radial-gradient(50% 40%,circle cover,#fcfcfc,#efeff1 66%,#9b5050 100%);
}
.white:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%,circle cover,rgba(255,255,255,1),rgba(255,255,255,.8) 14%,rgba(255,255,255,0) 24%);
position: absolute;
top: 10%;
left: 10%;
-webkit-transform: translateX(-60px) translateY(-60px) skewX(-20deg);
-webkit-filter: blur(10px);
}
.eye {
width: 40%;
height: 40%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%,circle cover,#208ab4 0%,#6fbfff 30%,#4381b2 100%);
position: absolute;
top: 30%;
right: 30%;
-webkit-animation: eye-skew 5s ease-out infinite;
}
.eye:before {
content: "";
width: 33%;
height: 33%;
border-radius: 50%;
background: #000;
position: absolute;
top: 33%;
left: 33%;
}
.eye:after {
content: "";
width: 25%;
height: 25%;
border-radius: 50%;
background: rgba(255,255,255,.3);
position: absolute;
top: 22%;
left: 22%;
}
.shadow {
width: 150px;
height: 30px;
border-radius: 75px/15px;
background: rgba(100,100,100,.4);
box-shadow: 0 0 10px 5px rgba(100,100,100,.4);
position: absolute;
left: 30px;
bottom: -45px;
z-index: 1;
}
