body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } [class~="container"] [class~="eye"] { position: relative; width: 10em; height: 10em; margin: 0 auto; background-color: #e0cbc6; border-radius: 100% 0rem; transform: rotate(45deg); display: flex; justify-content: center; align-items: center; border: 0.125rem solid #5e481e; overflow: hidden; box-shadow: 0.3125rem 1rem 1.25rem 0rem lightgrey; -webkit-animation: open 0.4s; animation: open 0.4s; } [class~="container"] [class~="eye"]:after { content: ""; width: 12em; height: 12em; position: absolute; border-radius: 100%; background-color: white; box-shadow: inset -0.1875rem 0.25rem 1.25rem 0rem lightgray; } [class~="container"] [class~="eye"] [class~="pupil"] { width: 2.5em; height: 2.5em; background-color: black; border-radius: 100%; transition-duration: 0.5s; } [class~="container"] [class~="eye"] [class~="iris"] { transform: rotate(-45deg); width: 7.5em; height: 7.5em; background-color: #5e481e; display: flex; justify-content: center; align-items: center; border-radius: 100%; z-index: 1; box-shadow: 0rem 0rem 1.25rem 0rem #8b451391; margin-bottom: 1.5em; margin-right: 1.5em; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-1"] { height: 7em; width: 7em; box-shadow: 0 0 0.0625rem 0.0625rem #5e481e; background: linear-gradient(90deg, #5e481e 1%, #5e481e 22%, #5e481e 50%, #5e481e 76%, #5e481e 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-2"] { height: 6.5em; width: 6.5em; box-shadow: 0 0 0.0625rem 0.0625rem #542a0e; background: linear-gradient(90deg, #542a0e 1%, #542a0e 22%, #542a0e 50%, #542a0e 76%, #542a0e 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-3"] { height: 6em; width: 6em; box-shadow: 0 0 0.0625rem 0.0625rem #63390f; background: linear-gradient(90deg, #63390f 1%, #63390f 22%, #63390f 50%, #63390f 76%, #63390f 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-4"] { height: 5.5em; width: 5.5em; box-shadow: 0 0 0.0625rem 0.0625rem #603101; background: linear-gradient(90deg, #603101 1%, #603101 22%, #603101 50%, #603101 76%, #603101 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-5"] { height: 5em; width: 5em; box-shadow: 0 0 0.0625rem 0.0625rem #451800; background: linear-gradient(90deg, #451800 1%, #451800 22%, #451800 50%, #451800 76%, #451800 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"] [class~="iris-6"] { height: 4.5em; width: 4.5em; box-shadow: 0 0 0.0625rem 0.0625rem #451800; background: linear-gradient(90deg, #451800 1%, #451800 22%, #451800 50%, #451800 76%, #451800 99%); display: flex; justify-content: center; align-items: center; border-radius: 100%; } [class~="container"] [class~="eye"] [class~="iris"]:hover [class~="pupil"] { width: 3em; height: 3em; } [class~="container"] [class~="eye"] [class~="brightness"] { width: 1em; height: 1.5em; background-color: white; position: absolute; z-index: 1; top: 2.5em; border-radius: 0.875rem 1.9375rem 0.625rem 0.4375rem/4.25rem 1.75rem 0.25rem 0.5625rem; opacity: 0.8; } [class~="container"] [class~="eye"] [class~="brightness--1"] { position: absolute; width: 0.5em; height: 1em; top: 5.5em; left: 3.5em; background-color: white; box-shadow: none; z-index: 1; border-radius: 1.6875rem 1.625rem 1.4375rem 0.5625rem/5.75rem 3.625rem 2.6875rem 0.875rem; opacity: 0.8; } @-webkit-keyframes open { from { height: 0em; transform: rotate(0deg); } } @keyframes open { from { height: 0em; transform: rotate(0deg); } }