<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solar Eclipse ☀️</title>
<style>
#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / 1) 34%, rgb(0 0 0 / 0) 34.3%) 0px 0px / 500px 500px no-repeat, /* Moon */
radial-gradient(ellipse at 50% 50%, rgb(255 123 0 / 0.48) 32%, rgb(0 0 0 / 0) 36%) 0px 0px / 500px 500px no-repeat, /* Glow */
radial-gradient(ellipse at 51% 49%, rgb(255 237 165 / 0.62) 17%, rgb(0 0 0 / 0) 38%) 0px 0px / 500px 500px no-repeat, /* Glow */
radial-gradient(ellipse at 52% 48%, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 1) 68%) 0px 0px / 500px 500px no-repeat, /* Mask */
radial-gradient(ellipse at 51% 49%, rgb(0 0 0 / 0) 35.15%, rgb(0 0 0 / 1) 54.77%) 0px 0px / 500px 500px no-repeat, /* Mask */
repeating-conic-gradient(from -6deg at 50% 50%, rgb(255 255 255 / 0) 0%, rgb(255 251 158 / 0.18) 13.14%, rgb(69 168 255 / 0) 16.67%, rgb(69 168 255 / 0) 16.67%) 0px 0px / 500px 500px no-repeat, /* Rays */
linear-gradient(rgb(0 0 0 / 1), rgb(0 0 0 / 1)) 0px 0px / 500px 497px no-repeat; /* Background */
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>