Home / Frontend Codes and Demos / CSS Code Demos / 3D looking clock made with CSS gradients and borders
3D looking clock made with CSS gradients and borders

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

3D looking clock made with CSS gradients and borders

3D looking clock made with CSS gradients and borders

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

Demo Download

Author Cassidy Williams
Hits
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 preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …