A Beautiful wall clock made with only Neumorphism CSS

So I was playing around with neomorphism CSS, and it resulted in this beautiful wall clock. You are permitted to copy the code and manipulate it; please give credit where due.

HTML

<html>
  <head>
    <title> Akin Neumorphism CSS Wall Clock </title> 
<link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="clock">
  <div class="frame-face"></div>
  <ul class="minute-marks">
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
  <div class="digital-wrap">
    <ul class="digit-hours">
      <li>23</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>
    </ul>
    <ul class="digit-minutes">
      <li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li>
    </ul>
    <ul class="digit-seconds">
      <li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li>
    </ul>
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>
  </body>
</html>

CSS

body { 
background: #f2f2f2;
 }
ul { list-style:none; margin:0; padding:0 }

#clock { font-size:1em; position:relative 
}

#clock .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}

#watch .frame-face:before {
  content:'';
  width:29.4em;
  height:29.4em;
  border-radius:14.7em;
  position:absolute;
  top:.3em; left:.3em;
  border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}

#clock .digits {
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:0; left:50%;
  margin-left:-15em;
}
#clock .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#clock .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#clock .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#clock .digits li:nth-child(3) { transform:translate(8em, 0) }
#clock .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#clock .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#clock .digits li:nth-child(6) { transform:translate(0, 8em) }
#clock .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#clock .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#clock .digits li:nth-child(9) { transform:translate(-8em, 0) }
#clock .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#clock .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#clock .digits li:nth-child(12) { transform:translate(0, -8em) }
#clock .digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#clock .digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
 
}
@keyframes hours { to {transform:rotate(335deg)} }
#clock .hours-hand {
  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  transform:rotate(-25deg);
  animation:hours 43200s linear 0s infinite;
}
#clock .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#clock .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#clock .minutes-hand {
  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  transform:rotate(62deg);
  animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#clock .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  transform:rotate(120deg);
  animation:seconds 60s steps(60, end) 0s infinite;
}
#clock .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#clock .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}
#clock .digital-wrap {
  width:9em;
  height:3em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  border-radius: 15px;
background: #000;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#clock .digital-wrap ul {
  float:left;
  width:2.85em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
}
#clock .digital-wrap ul:last-child { border:none }
#clock .digital-wrap li {
  font-size:1.5em;
  line-height:2;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  left:1px;
}
#clock .digit-minutes li {
  animation:dsm 3600s steps(60, end) 0s infinite;
}
#clock .digit-seconds li {
  animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm {
  to { transform:translateY(-120em) }
}

If you are my student, and you want to use this with VsCode. The CSS file you create must be named styles.css per what is in the href “hyperlink reference.”

14 Comments

  1. A brilliant work, you are a genius 👏😊

  2. Uncountable gbosa for you Agba Akin. You Sabi this thing meh

  3. Awesome work you did there. I’m replicating this!

  4. This is so firee. Didn’t know you could use animation to do this kind of thing

  5. Muhammad Bashir Abubakar says:

    wow….It’s quite beautiful

  6. Well done boss. please I’m seeing some classes and i.d’s in the css that are not in the html code, please how did you do this. please can you explain to us on twitter? I’m one of your student please.
    Thanks

  7. David Johnson says:

    This is sublime.

  8. Well done boss….thank you for all you do.

  9. Teibo Sunday says:

    I’m one of your students, and I appreciate your works but bro, I’m really getting confused and scared about all these codes. It feels like you didn’t even teach us most of what u used here.

    I really do not want to loose interest but I’m afraid am getting closer to that.
    😴

  10. Great article! We are linking to this particularly great article on our site. Keep up the good writing.

Leave a Reply

Your email address will not be published.