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:

Codesandbox Link:

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">
      <div class="hour hand" id="hour"></div>
      <div class="minute hand" id="minute"></div>
      <div class="seconds hand" id="seconds"></div>


Leave a Reply

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