In this post, I’ll show you how to create a beautiful, minimalist Date & Time UI with a Neumorphism effect, using only HTML, CSS, and JavaScript.
The best part?
It’s fully functional, updates every second, and has a soft, modern vibe that’s perfect for dashboards, widgets, or personal websites!
Let’s dive into it. 🌟
Project Overview
We’re building a small UI that displays:
-
Current Time (in 24-hour format)
-
Current Day (like Monday, Tuesday, etc.)
-
Current Date (formatted as
01 Jan 2025)
All this is wrapped inside a neumorphic card for that soft, 3D-pressed look.
HTML:
The HTML code sets up a basic webpage that displays a mini clock with the current time, day, and date. Inside the <body>, there’s a single div with the class clock that contains three elements: one for the time (id="time"), one for the day (id="day"), and one for the date (id="date"). The structure is simple and clean, and it connects to an external CSS file (style.css) for styling and a JavaScript file (script.js) to dynamically update the time, day, and date every second.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Date & Time Neumorphism UI</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock">
<div id="time">00:00:00</div>
<div id="day">Monday</div>
<div id="date">01 Jan 2025</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
The CSS code styles the webpage with a soft neumorphic design. The body is centered with a light grey background and a clean “Poppins” font. The .clock div has padding, rounded corners, and dual box-shadows to create a raised, 3D effect. Inside it, the #time element is highlighted with an inset shadow to look pressed-in, while #day and #date are styled with different font sizes and colors for a neat, modern appearance.
body {
background: #e0e0e0;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.clock {
background: #e0e0e0;
padding: 40px;
border-radius: 30px;
box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
text-align: center;
color: #333333;
width: 280px;
}
.clock #time {
padding: 10px 0;
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 10px;
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
border-radius: 10px;
}
.clock #day {
font-size: 1.2rem;
margin-bottom: 5px;
}
.clock #date {
font-size: 1rem;
color: #666666;
}
Javascript:
The JavaScript code updates the time, day, and date displayed inside the clock every second. It creates a function updateClock() that gets the current date and time using the Date object, formats them properly with toLocaleTimeString() and toLocaleDateString(), and then updates the corresponding HTML elements. The setInterval() function calls updateClock() every 1000 milliseconds (1 second), making the clock run in real time.
function updateClock() {
const now = new Date();
const time = now.toLocaleTimeString("en-US", { hour12: false });
const day = now.toLocaleDateString("en-US", { weekday: "long" });
const date = now.toLocaleDateString("en-US", {
day: "2-digit",
month: "short",
year: "numeric",
});
document.getElementById("time").textContent = time;
document.getElementById("day").textContent = day;
document.getElementById("date").textContent = date;
}
setInterval(updateClock, 1000);
updateClock();
Final Result
✨ A clean, real-time Date and Time UI with a soft neumorphic feel!
This can easily be expanded into a full dashboard widget, a personal website component, or even integrated into mobile UIs.
