Big Eye

HTML
<div class="white big-eye"> <div class="eye"></div> <div class="shadow"></div> </div>
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; }
JAVASCRIPT
Expand for more options Login