JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sl-circle inside"></div>
<div class="sl-ball inside"></div>

CSS

.inside{
    display: inline-block;
    margin-right: 10px;
}
.sl-circle{
	width:50px;
	height:40px;
	position:relative;
	background:radial-gradient(circle at 25px 20px , #4abc9c 15px, rgba(0, 0, 0, 0) 4px);
	/*radial-gradient(circle at (圆心坐标),圆颜色 圆半径,背景色 圆光晕半径)*/
}
.sl-ball{
	width:50px;
	height:50px;
	border-radius:50%;
	background:radial-gradient(ellipse at 30px 10px,#fff 0%,red 25%,#000 90%);
}