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>

 

Leave a Reply

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