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>Clock 🕑</title>
<style>
#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 50%, rgb(212 30 30 / 1) 0%, rgb(212 30 30 / 1) 20%, rgb(212 30 30 / 0) 22%) 220px 220px / 60px 60px no-repeat no-repeat, /* Middle Circle */
linear-gradient(-45deg, rgb(212 30 30 / 0) 49%, rgb(212 30 30 / 1) 49.1%, rgb(212 30 30 / 1) 51%, rgb(212 30 30 / 0) 51.1%) 120px 230px / 150px 150px no-repeat no-repeat, /* Seconds Handle */
linear-gradient(332deg, rgb(0 26 51 / 0) 48%, rgb(0 26 51 / 1) 49%, rgb(0 26 51 / 1) 51%, rgb(0 26 51 / 0) 52%) 247px 163px / 166px 92px no-repeat no-repeat, /* Minutes Handle */
linear-gradient(196deg, rgb(0 26 51 / 0) 48%, rgb(0 26 51 / 1) 49%, rgb(0 26 51 / 1) 51%, rgb(0 26 51 / 0) 52%) 120px 167px / 130px 130px no-repeat no-repeat, /* Hour Handle */
radial-gradient(ellipse at 50% 50%, rgb(0 26 51 / 0) 65%, rgb(0 26 51 / 1) 65.1%, rgb(0 26 51 / 1) 67%, rgb(0 26 51 / 0) 67.1%) 0px 0px / 500px 500px no-repeat no-repeat, /* Frame */
repeating-conic-gradient(from 25deg at 50% 50%, rgb(55 60 64 / 0) 0%, rgb(55 60 64 / 0.12) 6.08%, rgb(55 60 64 / 0) 13.02%, rgb(55 60 64 / 0.2) 22.92%, rgb(55 60 64 / 0.26) 27.61%, rgb(55 60 64 / 0) 50%, rgb(55 60 64 / 0) 50%) 0px 0px / 500px 500px no-repeat no-repeat, /* Polish */
radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 1) 47%, rgb(255 255 255 / 0) 47.1%, rgb(255 255 255 / 0) 63%, rgb(255 255 255 / 1) 63.1%) 0px 0px / 500px 500px no-repeat no-repeat, /* Mask */
repeating-conic-gradient(from 0deg at 50% 50%, rgb(0 26 51 / 1) 0%, rgb(0 26 51 / 1) 0.42%, rgb(0 26 51 / 0) 0.5%, rgb(0 26 51 / 0) 7.83%, rgb(0 26 51 / 1) 7.92%, rgb(0 26 51 / 1) 8.33%) 0px 0px / 500px 500px no-repeat no-repeat, /* Hour Marks */
radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 1) 54%, rgb(255 255 255 / 0) 54%, rgb(255 255 255 / 0) 63%, rgb(255 255 255 / 1) 63%) 0px 0px / 500px 500px no-repeat no-repeat, /* Mask */
repeating-conic-gradient(from 0deg at 50% 50%, rgb(0 26 51 / 1) 0%, rgb(0 26 51 / 1) 0.17%, rgb(0 26 51 / 0) 0.2%, rgb(0 26 51 / 0) 1.47%, rgb(0 26 51 / 1) 1.5%, rgb(0 26 51 / 1) 1.67%) 0px 0px / 500px 500px no-repeat no-repeat, /* Minute Marks */
linear-gradient(rgb(255 255 255 / 1), rgb(255 255 255 / 1)) 198px 186px / 100px 100px repeat repeat; /* Background */
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html> Comments (0)
Layers (11)
Middle Circle
radial
Seconds Handle
linear
Minutes Handle
linear
Hour Handle
linear
Frame
radial
Polish
conic
Mask
radial
Hour Marks
conic
Mask
radial
Minute Marks
conic
Background
solid
GRADIENT
.ART
css