A beautiful, beginner-friendly digital clock web app with modern glassmorphism design, animated background, glowing text, and powerful features—built using just HTML, CSS, and vanilla JavaScript.
- Modern Design – Glassmorphism effect with blur & transparency
- Gradient Background – Animated gradient and subtle particles
- Glowing Text – Time displays a cyan glow
- Responsive Layout – Perfect on mobile, tablet, desktop
- Smooth Animations – Blinking colon & gentle glow
- Real-Time Updates – Clock updates every second
- 12H/24H Toggle – Click button or press SPACEBAR to switch formats
- Current Date – Full date shown below time
- Timezone Display – Shows your current timezone
- Seconds Display – Small seconds counter included
- Keyboard Shortcut – Toggle format with SPACEBAR
- Clean Code – Well-commented & organized for learning
- CSS Variables – Easily customize colors
- Responsive Design – Works on all screens
- No Dependencies – Pure HTML, CSS, JS
Change colors by editing these CSS variables at the top of digital-clock.html:
:root {
--primary-color: #00d4ff; /* Main clock color */
--secondary-color: #0099cc; /* Secondary elements */
--background-dark: #0a0a0a; /* Dark background */
--background-light: #1a1a1a; /* Light background */
}- Open
digital-clock.htmlin any web browser. - The clock starts automatically!
- Toggle Format:
- Click the "Switch to 12H/24H" button
- Or press the SPACEBAR
- Enjoy!
- Full date, timezone, seconds, and smooth animations.
- Self-contained, well-documented, and super easy to customize.
- Perfect for beginners and anyone who loves beautiful clocks!
If you like this project, please consider giving a ⭐ star and sharing it with friends!
Found a bug? Need a feature? Open an issue
For questions or suggestions, reach out via Discussions
Made with 💙 by reezmahanan