.wrapper {
width: 100%;
text-align: center;
height: 200px;
}


.eye {
right: 15%;
width: 220px;
height: 220px;
transform: rotate(45deg);
border-top-left-radius: 80%;
border-bottom-right-radius: 60%;
border-top: 3px solid #1e0e2e;
border-left: 3px solid #1e0e2e;
box-shadow: 5px 5px 8px 6px #260661;


background-image: linear-gradient(140deg, #7e04c9, #ada0fa);
display: inline-block;
margin: 10px;

position: relative;
cursor: pointer;
overflow: hidden;

transition: 0.4s;

}

.eye:hover {
border-top-left-radius: 100%;

}

.ball {
width: 150px;
height: 150px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100px;
overflow: hidden;

box-shadow: 0 0 15px 15px rgba(0, 0, 0, 1.0);
}