3D Circle Effect

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/*Control the html behavior like
user-select is set none to prevent the user to select the text*/
html {
overflow-x: hidden;
user-select: none;
-ie-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}

/*Yep, you guys don't know why there is a shape attribute :v
*/
div[shape=circle] {
width: 250px;
height: 250px;
background-image: linear-gradient(330deg, rgba(196,0,255,1) 0%, rgba(45,168,253,1) 100%);
transition: 0.5s;
background-size: 200% auto;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.3), inset 0px 0px 10px 0px #FFFFFF, inset -30px -30px 20px 0px rgba(0,0,0,0.2);
border-radius: 50%;
}

/*The hover effect*/
div[shape=circle]:hover {
background-position: right center;
cursor: pointer;
}

/*Click effect*/
div[shape=circle]:active {
background-position: center center;
width: 230px;
height: 230px;
cursor: pointer;
}

/*Centerize the object*/
.center {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
max-width: 100%;
max-height: 100%;
margin: auto;
}
</style>
</head>
<body>

<div shape="circle" class="center">
</div>

</body>
</html>