Untitled

<html>
<head>
	<style>
	body {
		background: black;
	}
	.container {
		width: 150px;
		height: 150px;
		background: blue;
		display: inline-block;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.container::before {
		content: '';
		width: 85px;
		height: 85px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/*background: red;*/
		border: 4px solid blue;
		border-radius: 50%;
		z-index: 1;
	}
	.container::after {
		content: '';
		width: 120px;
		height: 120px;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(255,255,255);
		background: linear-gradient(185deg, rgba(255,255,255,0.8799894957983193) 0%, rgba(255,255,255,0.21052170868347342) 48%, rgba(255,255,255,0) 100%);
		border-radius: 50%;
	}

	.container .numero {
		width: 110px;
		height: 110px;
		border-radius: 50%;
		position: absolute;
		line-height: 100px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		font-size: 3em;
		font-weight: bold;
		font-family: sans-serif;
	}
</style>
</head>
<body>
	<span class="container">
		<span class="numero">1</span>
	</span>
</body>
</html>