@Dev-MV6
Posted
You can make the spotlight effect for the winner coin by using radial-gradient()
as the background of a pseudo-element, here's an example:
.coin {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #f00;
border-radius: 100%;
z-index: 1;
}
.coin::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 260%;
width: 260%;
background:
radial-gradient(circle,
hsla(0,0%,100%,.08) 40%,
hsla(0,0%,100%,.04) 40%,
hsla(0,0%,100%,.04) 55%,
hsla(0,0%,100%,.02) 55%
);
border-radius: 100%;
transform: translate(-50%,-50%);
transform-origin: 0 0; /* Useful when animating with scale() */
z-index: -1;
}
You can learn more about hard stop gradients on: https://css-tricks.com/books/greatest-css-tricks/hard-stop-gradients/
Hope you find this useful 👍
Marked as helpful
@AkamineFabio
Posted
@Dev-MV6 Thank you so much! Really appreciate it! I'll update it later!