GRADIENT
.ART
css
Sign In
<!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(255 255 255 / 0) 14.71%, rgb(255 233 158 / 0.12) 23.16%, rgb(255 255 255 / 0) 32.7%) 287px 103px / 120px 120px no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0) 35.69%, rgb(255 212 158 / 0.08) 49.05%, rgb(255 255 255 / 0) 61.04%) 285px 100px / 120px 120px no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgb(255 233 158 / 0.52) 0%, rgb(255 255 255 / 0) 17.98%) 282px 106px / 120px 120px no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgb(255 233 158 / 0.42) 0%, rgb(255 255 255 / 0) 41.42%) 282px 106px / 120px 120px no-repeat, /* Glow */
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 */
radial-gradient(ellipse at 51% 49%, rgb(0 0 0 / 0) 33.24%, rgb(0 0 0 / 1) 61%) 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 */
repeating-conic-gradient(from -6deg at 50% 50%, rgb(255 255 255 / 0) 0%, rgb(255 219 158 / 0.25) 1.36%, rgb(69 168 255 / 0) 4.55%, rgb(69 168 255 / 0) 4.55%) 0px 0px / 500px 500px no-repeat, /* Rays */
repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / 0) 0%, rgb(255 225 138 / 0.23) 4.35%, rgb(69 168 255 / 0) 7.69%, rgb(69 168 255 / 0) 7.69%) 0px 0px / 500px 500px no-repeat, /* Rays */
radial-gradient(ellipse at 51% 49%, rgb(0 0 0 / 0) 41.32%, rgb(0 0 0 / 1) 57.64%) 282px 106px / 140px 140px no-repeat, /* Mask */
repeating-conic-gradient(from 7deg at 50% 50%, rgb(255 255 255 / 0) 0%, rgb(255 233 158 / 0.28) 7.01%, rgb(69 168 255 / 0) 14.29%, rgb(69 168 255 / 0) 14.29%) 282px 106px / 120px 120px no-repeat, /* Rays */
repeating-conic-gradient(from -6deg at 50% 50%, rgb(255 255 255 / 0) 0%, rgb(255 219 158 / 0.21) 2.49%, rgb(69 168 255 / 0) 8.33%, rgb(69 168 255 / 0) 8.33%) 282px 106px / 120px 120px no-repeat, /* Rays */
linear-gradient(rgb(0 0 0 / 1), rgb(0 0 0 / 1)) 0px 0px / 500px 500px no-repeat; /* Background */
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html> Comments (0)
Forked from
Colors
Views
507
Code size
3.15 KB
Layers
17
Layers (17)
Glow
radial
Glow
radial
Glow
radial
Glow
radial
Moon
radial
Glow
radial
Glow
radial
Mask
radial
Mask
radial
Mask
radial
Rays
conic
Rays
conic
Rays
conic
Mask
radial
Rays
conic
Rays
conic
Background
solid
GRADIENT
.ART
css