glass-effect-clock

How to create a frosted glass effect clock using HTML and CSS

CSS Custom CSS Programming Web Design

Hello Everyone, Today I will implement a frosted glass effect clock using simple HTML, CSS and write some JS code for the real flavor of this beautiful clock.

Let’s start :

Live Demo Link:https://9034s.csb.app/

Codesandbox Link: https://codesandbox.io/s/frosting-glass-clock-9034s-9034s?from-embed

Let’s See the Design:

The below design is the final output that you will get as the final result of this content.

 

HTML Part:
To make this blurry effect clock you just need a parent class name clock and some subclass like an hour, minute, seconds. Here, I use a common class name hand to minimize some CSS. I put some common CSS properties in this class and then call in all subclasses.

Here is the HTML code:

<div class="clock">
      <img
        src="https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1"
      />
      <div class="hour hand" id="hour"></div>
      <div class="minute hand" id="minute"></div>
      <div class="seconds hand" id="seconds"></div>
    </div>

Now, Start with our simple CSS code

CSS Part:

Let’s design the Body:

body {
  background: url(https://dl.dropbox.com/s/8bojjv34k37t16m/Webp.net-resizeimage%20%282%29.jpg?raw=1)
    no-repeat center center fixed;

  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
}

In the body part, I use a background image for the background and fix the image.

.clock {
  height: 310px;
  width: 310px;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

In the clock class basically, I take the same value for height, width so that the clock can be a perfectly round shape. backdrop-filter property is used to give the blur effect the clock.-webkit property is used for browser support.

img {
  opacity: 0.6;
}

.hand {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 5px;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
}
.hour {
  height: 60px;
  width: 10px;
  top: 100px;
}

.minute {
  height: 80px;
  width: 5px;
  top: 80px;
}
Minute class is used for minute.
.seconds {
  height: 90px;
  width: 3px;
  top: 70px;
}

Seconds class is used for seconds.

JS Code:

For a real-time flavor of the clock, I use some js code. If you don’t want the real-time clock then you can skip this part.

var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");

You can see that here I take three variables for an hour, minute, and seconds.

var set_clock = setInterval(function clock() {
  var date_now = new Date();
  var hr = date_now.getHours();
  var min = date_now.getMinutes();
  var sec = date_now.getSeconds();

  var calc_hr = hr * 30 + min / 2;
  var calc_min = min * 6;
  var calc_sec = sec * 6;

  hour.style.transform = "rotate(" + calc_hr + "deg)";
  minute.style.transform = "rotate(" + calc_min + "deg)";
  seconds.style.transform = "rotate(" + calc_sec + "deg)";
}, 1000);

and take one more variable set_clock to store the function.

Full Source Code:

<body>
    <div class="clock">
      <img
        src="https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1"
      />
      <div class="hour hand" id="hour"></div>
      <div class="minute hand" id="minute"></div>
      <div class="seconds hand" id="seconds"></div>
    </div>

    <script src="js/main.js"></script>
  </body>
body {
  background: url(https://dl.dropbox.com/s/8bojjv34k37t16m/Webp.net-resizeimage%20%282%29.jpg?raw=1)
    no-repeat center center fixed;

  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
}
.clock {
  height: 310px;
  width: 310px;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

img {
  opacity: 0.6;
}

.hand {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 5px;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
}
.hour {
  height: 60px;
  width: 10px;
  top: 100px;
}
.minute {
  height: 80px;
  width: 5px;
  top: 80px;
}
.seconds {
  height: 90px;
  width: 3px;
  top: 70px;
}
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");

var set_clock = setInterval(function clock() {
  var date_now = new Date();
  var hr = date_now.getHours();
  var min = date_now.getMinutes();
  var sec = date_now.getSeconds();

  var calc_hr = hr * 30 + min / 2;
  var calc_min = min * 6;
  var calc_sec = sec * 6;

  hour.style.transform = "rotate(" + calc_hr + "deg)";
  minute.style.transform = "rotate(" + calc_min + "deg)";
  seconds.style.transform = "rotate(" + calc_sec + "deg)";
}, 1000);

Hits: 24

Leave a Reply

Your email address will not be published. Required fields are marked *