Hello readers, Today in this blog you’ll learn how to create a Working Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. Earlier I have also shared a blog on how to create a Digital Clock using JavaScript but in that clock, there wasn’t a glowing effect and now it’s time to create a colorful glowing effect on the digital clock.
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. If you’re searching for Working Analog Clock, I have also created a blog on how to create a Working Analog Clock.
In this program (Digital Clock with Colorful Glowing Effect), on the webpage, there is a digital clock that 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 shows on the webpage. Using Javascript new Date() method I fetched real-time from my current PC.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Digital Clock with Colorful Glowing Effect ).
Video Tutorial of Digital Clock with Colorful Glowing Effect
In the video, you have seen the working digital clock which is displaying real-time and I hope you have understood the basic codes behind creating this program. As you have seen in the video, I used the only CSS to create a glowing background effect and animate it with the CSS @keyframes property. But to show the real-time I used pure JavaScript.
If you’re a beginner, you can also create this digital clock or the glowing effect because there are no vast codes of CSS and JavaScript on this program. If you like this program (Custom Checkbox Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Working Clock in your HTML pages and websites.
You might like this:
Digital Clock with Colorful Glowing Effect [Source Codes]
To create this program (Digital Clock with Colorful Glowing Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html> <!-- Created By CodingNepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Digital Clock with Glowing Effect | CodingNepal</title> <link rel="stylesheet" href="style.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>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{ 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); }
That’s all, now you’ve successfully created a Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
thank you
Thank You Man,Its Amazing.Greate Work..Thank You Again
Thank You
-webkit-background-clip
its not working. it shows a error.
hey
that was amazing thank you!
how can i set other countries time for this clock?
It’s not running… I don’t know what’s happening with this.
hi, i am trying to make a website. i copy and paste the code for the clock and it works, but now its making all of my images in my website code to go in the center. is there a way i can move the clock in a different area of the page but keep the images and everything else in the same spot?
How to download sir, I can’t understand
Please, copy the codes and paste in your html, CSS files.
can I set this clock as my wallpaper ? pls help
I didn’t understand
Thanks for the help
You’re welcome and keep visiting.
not glowing bro but working
Please, recheck your codes.
Bro, Where Is The Download Button?
For this project, there is no download button. Please, create the specified file and paste the given codes.
wow superb i subsribed your both channel
sir i wanna learn coding but how to start and where to start
Great
Thank you 🙂
Thank you 🙂
excellent
Thank you 🙂
Super !
hai bro
super
Sir, i don't know how to comment but please tell what to do if it does'nt works??
You're welcome 🙂
ur an pro bro, thanks for the quiz template!
Sorry I haven't fiverr profile yet but soon I'm going to create it. You can contact me on Email – [email protected]
can i hire you for some projects ?
If yes.
please share your fiverr link .
thanks
Thank you 🙂
this is really impressive
You're welcome man 🙂
Man that is aesthitic !
Love it
Love from India!!!! to
Nepal 🙂
Thank you 🙂