3D looking clock made with CSS gradients and borders

A 3D (looking) clock made with CSS gradients and borders. Demo and Download options available.

You might also like

CSS Shapes Forest Collection Spring Summer 2020

October 11, 2020

CSS Button Concept for Remove and Success

August 21, 2019

HTML Snippet

<div class="container">
  <div class="rim"></div>
  <div class="outer"></div>
  <div class="inner">
  </div>
  <div id="clock"></div>
</div>

Less Code

body {
  background: #000;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border: 20px solid #000;
  border-radius: 50%;
  animation: shift-rim 8s infinite;
  z-index: 10;
}

.outer {
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(8,8,71,1) 100%);
  border: 10px solid #1A23F2;
  border-radius: 50%;
  box-sizing: border-box;
  filter: blur(2px);
  animation: shift 8s infinite;
  &::before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 104%;
    height: 104%; 
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 1;
    filter: blur(2px);
  }
}

.inner {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
    background: linear-gradient(to bottom, rgba(8,8,71,1) 0%, rgba(0,0,0,1) 100%);
  border: 8px solid #1A23F2;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 10px 20px 10px #000;
  filter: blur(1px);
  animation: shift-inner 8s infinite;
    &::before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%; 
    border: 8px solid #000;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 1;
    filter: blur(5px);
  }
   &::after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 105%; 
    border: 1px solid #6AAEE9;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 1;
    filter: blur(3px);
  }
}

#clock {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 50px;
  color: #fff;
  font-family: 'Baloo Tammudu', cursive;
  font-size: 40px;
  text-align: center;
  text-shadow: 0 0 30px #8DCAED;
  animation: shift-clock 8s infinite;
}

@keyframes shift {
  0% {
    height: 100px;
  }
  50% {
    height: 280px;
  }
  100% {
    height: 100px;
  }
}

@keyframes shift-rim {
  0% {
    top: 40%;
    height: 100px;
  }
  50% {
    top: 50%;
    height: 280px;
  }
  100% {
    top: 40%;
    height: 100px;
  }
}

@keyframes shift-inner {
  0% {
    top: -10px;
    height: 50px;
  }
  50% {
    top: 40px;
    height: 190px;
  }
  100% {
    top: -10px;
    height: 50px;
  }
}

@keyframes shift-clock {
  0% {
    top: -10px;
    transform: translateX(-50%) scaleY(.2);
  }
  50% {
    top: 100px;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    top: -10px;
    transform: translateX(-50%) scaleY(.2);
  }
}

View Compiled CSS

body {
  background: #000;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.rim {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border: 20px solid #000;
  border-radius: 50%;
  -webkit-animation: shift-rim 8s infinite;
          animation: shift-rim 8s infinite;
  z-index: 10;
}
.outer {
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom, #000000 0%, #080847 100%);
  border: 10px solid #1A23F2;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  -webkit-animation: shift 8s infinite;
          animation: shift 8s infinite;
}
.outer::before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 104%;
  height: 104%;
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 50%;
  opacity: 1;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.inner {
  position: absolute;
  top: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, #080847 0%, #000000 100%);
  border: 8px solid #1A23F2;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 10px 20px 10px #000;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  -webkit-animation: shift-inner 8s infinite;
          animation: shift-inner 8s infinite;
}
.inner::before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 8px solid #000;
  box-sizing: border-box;
  border-radius: 50%;
  opacity: 1;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.inner::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 105%;
  height: 105%;
  border: 1px solid #6AAEE9;
  box-sizing: border-box;
  border-radius: 50%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
#clock {
  position: absolute;
  top: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  height: 50px;
  color: #fff;
  font-family: 'Baloo Tammudu', cursive;
  font-size: 40px;
  text-align: center;
  text-shadow: 0 0 30px #8DCAED;
  -webkit-animation: shift-clock 8s infinite;
          animation: shift-clock 8s infinite;
}
@-webkit-keyframes shift {
  0% {
    height: 100px;
  }
  50% {
    height: 280px;
  }
  100% {
    height: 100px;
  }
}
@keyframes shift {
  0% {
    height: 100px;
  }
  50% {
    height: 280px;
  }
  100% {
    height: 100px;
  }
}
@-webkit-keyframes shift-rim {
  0% {
    top: 40%;
    height: 100px;
  }
  50% {
    top: 50%;
    height: 280px;
  }
  100% {
    top: 40%;
    height: 100px;
  }
}
@keyframes shift-rim {
  0% {
    top: 40%;
    height: 100px;
  }
  50% {
    top: 50%;
    height: 280px;
  }
  100% {
    top: 40%;
    height: 100px;
  }
}
@-webkit-keyframes shift-inner {
  0% {
    top: -10px;
    height: 50px;
  }
  50% {
    top: 40px;
    height: 190px;
  }
  100% {
    top: -10px;
    height: 50px;
  }
}
@keyframes shift-inner {
  0% {
    top: -10px;
    height: 50px;
  }
  50% {
    top: 40px;
    height: 190px;
  }
  100% {
    top: -10px;
    height: 50px;
  }
}
@-webkit-keyframes shift-clock {
  0% {
    top: -10px;
    -webkit-transform: translateX(-50%) scaleY(0.2);
            transform: translateX(-50%) scaleY(0.2);
  }
  50% {
    top: 100px;
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
  100% {
    top: -10px;
    -webkit-transform: translateX(-50%) scaleY(0.2);
            transform: translateX(-50%) scaleY(0.2);
  }
}
@keyframes shift-clock {
  0% {
    top: -10px;
    -webkit-transform: translateX(-50%) scaleY(0.2);
            transform: translateX(-50%) scaleY(0.2);
  }
  50% {
    top: 100px;
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
  100% {
    top: -10px;
    -webkit-transform: translateX(-50%) scaleY(0.2);
            transform: translateX(-50%) scaleY(0.2);
  }
}

JavaScript

(function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    m = checkTime(m);
    document.getElementById('clock').innerHTML =
    h + ":" + m;
    var t = setTimeout(startTime, 500);
})();

function checkTime(i) {
  if (i < 10) {i = "0" + i};
  return i;
}

Preview