3D Looking Clock Made With CSS Gradients And Borders

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

Author	Cassidy Williams
Created	SEPTEMBER 14, 2018
License	Open
Compatible browsers	Chrome, Firefox, Safari

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

3D looking clock made with CSS gradients and borders 1

3D looking clock made with CSS gradients and borders

Comments

Leave a Reply Cancel reply