WebTec
WebTec
Learn everything about Webdevelopment
Home
Social Media
About
Neumorphism UI Clock | Using HTML, CSS and JavaScript
HTML
Clock JavaScript
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background: #1E1E1E; height: 100vh; } .clock { display: flex; align-items: center; justify-content: center; height: 350px; width: 350px; background: #1E1E1E; border-radius: 50%; box-shadow: -18px -12px 16px -9px rgba(255, 255, 255, 0.25), 5px 11px 20px rgba(0, 0, 0, 0.69), inset -39px -25px 44px -28px rgba(255, 255, 255, 0.22), inset 27px 23px 84px rgba(0, 0, 0, 0.46); } .clock::before { content: ''; position: absolute; width: 7px; height: 7px; background: #747474; border-radius: 50%; z-index: 1000; } .hour, .minute { position: absolute; } .hour, .hr { height: 140px; width: 140px; justify-content: center; display: flex; } .hr::before { content: ''; position: absolute; width: 7px; height: 70px; background: #747474; } .minute, .min { height: 260px; width: 260px; justify-content: center; display: flex; } .min::before { content: ''; position: absolute; width: 7px; height: 130px; background: #747474; }
Back
Video