Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Design a Digital Clock in Neumorphism Style using JavaScript

Javascript Front End Technology Programming Scripts Web Development

In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a design trend characterized by soft, raised elements with subtle shadows that create an embossed or pressed effect on the interface.

HTML Structure

Let's start by creating the basic HTML structure for our neumorphic digital clock. We need a container for the clock and display elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic Digital Clock</title>
</head>
<body>
    <div class="clock-container">
        <div class="clock-face">
            <div id="time-display" class="time-display">00:00:00</div>
            <div class="controls">
                <button id="start-btn" class="neu-button">Start</button>
                <button id="stop-btn" class="neu-button">Stop</button>
            </div>
        </div>
    </div>
</body>
</html>

CSS Styling for Neumorphic Effect

The key to neumorphism is creating soft shadows that simulate depth. We use both inset and outset box-shadows to achieve this effect.

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.clock-container {
    background: #e0e0e0;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 
        20px 20px 40px #bebebe,
        -20px -20px 40px #ffffff;
}

.clock-face {
    background: #e0e0e0;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 
        inset 10px 10px 20px #bebebe,
        inset -10px -10px 20px #ffffff;
}

.time-display {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 
        8px 8px 16px #bebebe,
        -8px -8px 16px #ffffff;
}

.controls {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.neu-button {
    background: #e0e0e0;
    border: none;
    padding: 15px 25px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    box-shadow: 
        6px 6px 12px #bebebe,
        -6px -6px 12px #ffffff;
    transition: all 0.2s ease;
}

.neu-button:active {
    box-shadow: 
        inset 6px 6px 12px #bebebe,
        inset -6px -6px 12px #ffffff;
}

JavaScript Functionality

Now let's add the JavaScript code to make our clock functional. We'll create functions to get the current time, start the clock, and stop it.

let clockInterval = null;

function updateTime() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    
    const timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('time-display').textContent = timeString;
}

function startClock() {
    if (clockInterval === null) {
        updateTime(); // Show time immediately
        clockInterval = setInterval(updateTime, 1000);
    }
}

function stopClock() {
    if (clockInterval !== null) {
        clearInterval(clockInterval);
        clockInterval = null;
    }
}

// Event listeners
document.getElementById('start-btn').addEventListener('click', startClock);
document.getElementById('stop-btn').addEventListener('click', stopClock);

// Initialize clock on page load
window.addEventListener('load', startClock);

Complete Working Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic Digital Clock</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .clock-container {
            background: #e0e0e0;
            border-radius: 30px;
            padding: 40px;
            box-shadow: 
                20px 20px 40px #bebebe,
                -20px -20px 40px #ffffff;
        }
        
        .clock-face {
            background: #e0e0e0;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 
                inset 10px 10px 20px #bebebe,
                inset -10px -10px 20px #ffffff;
        }
        
        .time-display {
            font-size: 3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 30px;
            background: #e0e0e0;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 
                8px 8px 16px #bebebe,
                -8px -8px 16px #ffffff;
        }
        
        .controls {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        
        .neu-button {
            background: #e0e0e0;
            border: none;
            padding: 15px 25px;
            border-radius: 15px;
            font-size: 1rem;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            box-shadow: 
                6px 6px 12px #bebebe,
                -6px -6px 12px #ffffff;
            transition: all 0.2s ease;
        }
        
        .neu-button:active {
            box-shadow: 
                inset 6px 6px 12px #bebebe,
                inset -6px -6px 12px #ffffff;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <div class="clock-face">
            <div id="time-display" class="time-display">00:00:00</div>
            <div class="controls">
                <button id="start-btn" class="neu-button">Start</button>
                <button id="stop-btn" class="neu-button">Stop</button>
            </div>
        </div>
    </div>
    
    <script>
        let clockInterval = null;
        
        function updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            const timeString = `${hours}:${minutes}:${seconds}`;
            document.getElementById('time-display').textContent = timeString;
        }
        
        function startClock() {
            if (clockInterval === null) {
                updateTime();
                clockInterval = setInterval(updateTime, 1000);
            }
        }
        
        function stopClock() {
            if (clockInterval !== null) {
                clearInterval(clockInterval);
                clockInterval = null;
            }
        }
        
        document.getElementById('start-btn').addEventListener('click', startClock);
        document.getElementById('stop-btn').addEventListener('click', stopClock);
        
        window.addEventListener('load', startClock);
    </script>
</body>
</html>

Key Features

Our neumorphic clock includes several important features:

  • Soft Shadows: Uses both positive and negative box-shadows to create depth
  • Interactive Buttons: Buttons have pressed effect when clicked using inset shadows
  • Real-time Updates: Clock updates every second when started
  • Clean Design: Minimalist interface following neumorphic design principles

How Neumorphism Works

The neumorphic effect is achieved by using two contrasting shadows on the same background color. Light shadows create highlights while dark shadows create depth, making elements appear to emerge from or sink into the surface.

Conclusion

We've successfully created a digital clock with neumorphic styling using HTML, CSS, and JavaScript. The design combines functional timekeeping with modern visual aesthetics, demonstrating how to implement the popular neumorphism design trend in web interfaces.

Updated on: 2026-03-15T23:19:00+05:30

513 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements