Smart watch - Clock

Open In Editor Publish Your Code

.watch{
  --watch-color: white;
  --screen-color: black;  
  font-size: 4.5vmin;
  font-family: monospace;
  color: #fff;
  padding: 2em 1.5em;
  border: 2px solid var(--watch-color);
  border-radius: 2em;
  box-shadow:
    inset 0 0 0 .5em black,
    inset 0 0 1rem 1em hsl(0 0% 100% / .25);
  background-color: var(--screen-color);
  background-image: linear-gradient(to bottom right, #fff0 50%, hsl(0 0% 100% / .25));
  position: relative;
}
.watch::before, .watch::after{
  content: "";
  position: absolute;
  background-color: var(--watch-color);
  z-index: -1;
}
.watch::after{
  inset: -.5em 20%;
  border-radius: .5em;
  background-image: 
    linear-gradient(#fff0, hsl(0 0% 0% / .5) .5em calc(100% - .5em), #fff0);
}
.watch::before{
  inset: -50vh 25%;
  background-image: 
    repeating-linear-gradient(#fff0 0 .3em, hsl(0 0% 0% / .125) .3em .5em, #fff0 .5em .8em),
    radial-gradient(circle, #fff0, hsl(0 0% 0% / .25) 50%);
}
.keyword  { color: #ddca7e; }
.def      { color: #809bbd; }
.operator { color: #cccccc; }
.property { color: #9a8297; }
.string   { color: #96b38a; }
.number   { color: #d0782a; }
* { box-sizing: border-box; }
body { 
  margin: 0;
  padding: 1em;
  min-height: 100vh;
  background-color: #1d1e22;
  display: grid;
  place-items: center;
  overflow: hidden;
}

JS

clock();

Smart watch - Clock

Recommended

Zig-zag border & cool hover effect

Landing Page - Hotel

Text to Flower Generator - Animated Letter Art

HTML

CSS

JS

Recommended

Zig-zag border & cool hover effect

Landing Page - Hotel

Text to Flower Generator - Animated Letter Art

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS