Build A Glassmorphism Lock UI With Dark Mode
The Design Vision
Modern interfaces often use the glassmorphism trend.
This style mimics frosted glass surfaces.
You create depth with transparency and background blur.
This project focuses on a restricted access keypad.
It works for security screens or app lockers.
Primary Features
This UI includes several functional elements:
A glassmorphism container with soft edges A responsive numeric keypad Light and dark theme support Input state tracking for four digit pins Clear visual feedback for button presses The Glass Effect
You achieve the glass look using specific CSS properties.
The most important property is backdrop-filter.
This applies a blur to the area behind your element.
You must also use a semi-transparent background color.
Code Structure
You start with a clean HTML layout.
RESTRICTED ACCESS
123
456
789
del0GO
You apply the glass styling in your CSS.
.glass-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 40px;
}
You handle the logic with JavaScript.
const buttons = document.querySelectorAll('button');
let pin = '';
buttons.forEach(btn => {
btn.addEventListener('click', () => {
if (pin.length < 4) {
pin += btn.innerText;
updateDots();
}
});
});
const themeToggle = document.querySelector('.theme-btn');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
Build Your Own
You can adapt this keypad for any authentication flow.
You can change the blur intensity to match your branding.
You can swap the icons for different security levels.
What type of security projects are you building right now?
