.png){kind=small}
Create a Stunning Neon Clock with Pure CSS and JavaScript (2026 Guide)
Want to add a futuristic, eye-catching element to your website or portfolio? A neon clock is the perfect blend of retro arcade style and modern web design. In this tutorial, you'll learn how to build a fully functional neon clock using pure HTML, CSS, and JavaScript – no external libraries or images required. Whether you're a beginner looking to practice DOM manipulation or an experienced developer wanting to add a cool widget to a dashboard, this step‑by‑step guide has you covered. We'll also share customization tips, real‑world use cases, and answer common questions. Let’s light up your page!
Why Build a Neon Clock? (Real‑World Use Cases)
- Personal portfolios: Show off your front‑end skills with a unique, interactive element.
- Stream overlays: Twitch and YouTube streamers use neon clocks to display local time or countdowns.
- Dashboards & kiosks: Add a stylish time display for internal tools or public information screens.
- Creative agency sites: Impress clients with a cutting‑edge design that stands out.
Plus, building this clock teaches you core concepts like CSS animations, JavaScript timing events, and responsive design – skills you can use in countless projects.
Live Demo: See the Neon Clock in Action
⏰ The clock updates every second – pure JavaScript + CSS glow effect.
Step 1: HTML Structure – The Foundation
We keep the HTML minimal. A container div will hold the clock display. You can place it anywhere on your page.
<div id="neon-clock">--:--:--</div>
Step 2: CSS – The Neon Glow Effect
The secret to the neon look is the text-shadow property. Multiple shadows with different blur radii create the glowing tube effect. We also add a dark background to make the light pop.
#neon-clock {
font-family: 'Courier New', monospace;
font-size: 4rem;
font-weight: bold;
background: #000;
color: #0ff;
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
padding: 20px;
text-align: center;
border-radius: 15px;
letter-spacing: 8px;
}
You can change the color by replacing #0ff (cyan) with any neon color like #f0f (magenta) or #ff0 (yellow).
Step 3: JavaScript – Real‑Time Updates
The JavaScript fetches the current system time and updates the clock every second. We use setInterval() for smooth, continuous updates.
function updateClock() {
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');
document.getElementById('neon-clock').innerText = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock();
Step 4: Putting It All Together (Complete HTML)
Copy the code below into an .html file and open it in your browser. You’ll see the neon clock live.
<!DOCTYPE html>
<html>
<head><title>Neon Clock</title>
<style>
body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
#neon-clock { font-family: 'Courier New', monospace; font-size: 4rem; font-weight: bold; background: #000; color: #0ff; text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff; padding: 20px; border-radius: 15px; letter-spacing: 8px; }
</style>
</head>
<body>
<div id="neon-clock">--:--:--</div>
<script>
function updateClock() {
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');
document.getElementById('neon-clock').innerText = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Beginner Tips & Customization Ideas
- Change colors: Replace
#0ffwith your favorite neon hex code (e.g.,#ff00ccfor pink). - Add a background image: Wrap the clock in a
divwith a dark cityscape or cyberpunk background. - 12‑hour format: Modify the JavaScript to show AM/PM using
now.getHours() % 12. - Add a blinking colon effect: Use CSS animation to make the colon pulse.
- Responsive design: Use
vwunits for font size so the clock scales on mobile.
For more creative coding projects, check out our original neon clock post and Free AI Handwritten Text Generator.
Frequently Asked Questions (FAQ)
Does the neon clock work on mobile devices?
Yes! The CSS uses relative units, and the JavaScript runs on any modern browser (iOS Safari, Android Chrome). For smaller screens, reduce the font size using a media query.
Can I use this clock on a live website without performance issues?
Absolutely. The clock uses setInterval which is very lightweight. Even with thousands of visitors, it won't slow down your site. For extreme scale, you could use requestAnimationFrame, but it’s unnecessary.
How can I add a date display below the clock?
Create another <div> and use now.toLocaleDateString() to update it similarly. Example: document.getElementById('date').innerText = now.toLocaleDateString();
Is this code free to use for commercial projects?
Yes, this tutorial is for educational and commercial use. No attribution required, though a link back is appreciated. You can modify and sell it as part of a larger product.
Why does the clock sometimes show 24‑hour format? Can I change it?
The current code uses getHours() (0‑23). For 12‑hour format, replace the hours line with: let hours = now.getHours() % 12 || 12; and add an AM/PM indicator.
Related Posts You Might Like
You’ve just built a professional‑looking neon clock from scratch! This project proves that with a few lines of HTML, CSS, and JavaScript, you can create something visually stunning and functional. Use it on your personal site, portfolio, or even as a learning tool for students. Experiment with different colors, fonts, and animations to make it uniquely yours. If you enjoyed this tutorial, share it with fellow developers and subscribe to Domebytes for more creative coding projects.
Follow Domebytes Blog Explore More Tutorials