TaiJi

by Dong Shelton

HTML

<div class="gradient"></div>

CSS

.gradient {
	position: relative;
	margin: 10px auto;
	width: 200px;
	height: 200px;
	background-image: linear-gradient(90deg, white 50%, black 50%, black 100%);
	border-radius: 50%;
	box-shadow: 0 0 10px 0px gray;
}
div.gradient:before {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	left: 25%;
	top: 0;
	background-image: radial-gradient(circle, black 24%, white 26%, white);
	border-radius: 50%;
}
div.gradient:after{
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	right: 25%;
	bottom: 0;
	background-image: radial-gradient(circle, white 24%, black 26%, black);
	border-radius: 50%;
}