console
<div class="demo-bg">
<div class="demo">
<div class="demo-text">632</div>
</div>
</div>
body,
html {
background-color: #0d1426;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.demo-bg {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
background-image: linear-gradient(90deg, #162b3c, #77e3ec, #162b3c);
transform: rotateX(60deg);
}
.demo {
position: absolute;
inset: 0;
margin: 0px 2px 12px;
border-radius: inherit;
background-image: linear-gradient(to bottom, #0d1426 0%, #172e3c 100%);
filter: drop-shadow(0 0 0.75rem crimson);
}
.demo:before {
position: absolute;
content: "";
top: 10px;
inset-inline: 25px;
bottom: 50px;
border-radius: 999px;
background: #6adfe8;
animation: rotate 2s linear infinite;
padding: 6px;
-webkit-mask-composite: source-in;
-webkit-mask: linear-gradient(#0000 0 0) content-box,
repeating-conic-gradient(from 20deg, #000 0 30deg, #0000 0 60deg);
}
.demo-text {
position: absolute;
height: 140px;
inset-inline: 10px;
bottom: 110px;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom, transparent 0%, #4590a1 100%);
animation: gradientAnimation .5s linear infinite;
color: #cad1d8;
font-size: 42px;
font-weight: bold;
text-shadow: 0 0 5px;
clip-path: polygon(100% 0, 0 0, 50% 200%);
transform: scaley(2);
transform-origin: bottom;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% 100%;
}
}
.demo-text::after {
position: absolute;
content: "";
width: 50%;
height: 30px;
top: 100%;
background-image: linear-gradient(to bottom, #4590a1 0%, #468fa0 100%);
transform: translatey(-50%);
border-radius: 50%;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}