How to Create a Modern Glassmorphism Digital Clock using HTML, CSS, and JavaScript

How to Create a Modern Glassmorphism Digital Clock using HTML, CSS, and JavaScript

Introduction: Welcome to the first project on Code by Zaibi! Today, we are building a modern digital clock using glassmorphism design principles. This UI trend uses transparency and background blur to create a sleek, "frosted glass" effect that looks amazing on any website.

Key Features:

Real-time Tracking: Accurate hours, minutes, and seconds.
Glassmorphism UI: Modern frosted glass effect.
Fully Responsive: It works perfectly on mobile, tablets, and desktops.
Clean Code: Optimized and easy to understand for beginners.

Now, switch your Blogger editor to HTML view and paste the following. (I have already encoded this for you so it works perfectly with your new template):

Copy the this code and paste it into your project files to get started.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Digital Clock</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { 
            display: flex; justify-content: center; align-items: center; 
            min-height: 100vh; background: #0f172a; 
        }
        .clock {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 60px;
            border-radius: 20px;
            color: #fff;
            text-align: center;
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        }
        #time { font-size: 5rem; font-weight: 700; letter-spacing: 2px; }
        .date { font-size: 1.2rem; margin-top: 10px; color: #00d2ff; text-transform: uppercase; letter-spacing: 3px; }
    </style>
</head>
<body>

    <div class="clock">
        <div id="time">00:00:00</div>
        <div class="date" id="date">LOADING...</div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            let h = now.getHours();
            let m = now.getMinutes();
            let s = now.getSeconds();
            
            h = h < 10 ? "0" + h : h;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;

            document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
            
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            document.getElementById("date").innerHTML = now.toLocaleDateString('en-US', options);
        }
        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>

How to Use: Simply copy the code above, save it as a index.html file, and open it in your browser to see the magic!