M/s VIKASH TECH - We Write Imaginations to Codes..!!

Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Working Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript.
A digital clock or watch in which the hours, minutes, and sometimes seconds are indicated by digits, as opposed to an analog clock, where the time is indicated by the positions of rotating hands.
In this program (Digital Clock with Colorful Glowing Effect), on the webpage, there is a digital clock which is displaying the real-time with a colorful gradient glowing background and text effect. Generally, this clock takes real-time from our pcs/computers not from the server and show on the webpage. Using Javascript new Date() method I fetched real-time from my current PC.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Digital Clock with Glowing Effect | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="display">
        <div id="time">
</div>
</div>
<span></span>
      <span></span>
    </div>
<script>
      setInterval(()=>{
        const time = document.querySelector(".display #time");
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        let day_night = "AM";
        if(hours > 12){
          day_night = "PM";
          hours = hours - 12;
        }
        if(seconds < 10){
          seconds = "0" + seconds;
        }
        if(minutes < 10){
          minutes = "0" + minutes;
        }
        if(hours < 10){
          hours = "0" + hours;
        }
        time.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
      });
    </script>

  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.wrapper{
  height: 100px;
  width: 360px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display{
  z-index: 999;
  height: 85px;
  width: 345px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time{
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
    filter: hue-rotate(360deg);
  }
}
.wrapper span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child{
  filter: blur(7px);
}
.wrapper span:last-child{
  filter: blur(20px);
}
Category :

Comments

No comments found.

Leave a Comment

….

JOIN TODAY

Affiliate Marketing

Latest Posts

Popup Login Form Design in HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Popup Login Form Design using only HTML &…

Popup Subscription Form using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Popup Subscription Form or Modal Box using HTML…

Custom Modal Box using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Dialog or Modal Box using HTML CSS &…

Neumorphism Profile Card UI Design using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS.…

Tags