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