Introduction
This project is a modern, animated login interface featuring a video background with a smooth fade-in overlay. It combines elegant glassmorphism effects, animation, and responsive design principles to deliver an immersive user experience. The form appears in an overlay when the “Login” button is clicked, creating a dynamic and focused login experience.
Main Features
1. Video Background
- Uses a high-quality looping video as the background.
- Creates a visually appealing and modern atmosphere.
- The video runs automatically and remains behind the overlay content.
2. Animated Fade-In Overlay
- The overlay fades in smoothly when triggered.
- Uses semi-transparent dark background with a blur effect (
backdrop-filter: blur(10px)). - Enhances focus on the login form while still showing the background video.
3. Glassmorphic Login Container
- Transparent, frosted-glass look with rounded corners.
- Stylish border and subtle drop shadow for depth.
- Fully responsive and centered on any screen size.
4. Floating Labels
- Labels rise and shrink smoothly when input fields are active.
- Ensures clarity and a clean, minimal look.
- Improves accessibility and modern visual design.
5. Button Effects
- Buttons include hover animations and shadow transitions.
- Rounded and consistent with the rest of the UI theme.
6. Error Message System
- Displays error messages for missing credentials.
- Styled clearly in red to stand out against the transparent background.
7. Interactive Controls
- Overlay can be closed using the “×” button or after successful login.
- Supports pressing the Enter key to trigger login.
- Simulated authentication system (can later be replaced with actual validation).
8. Responsive Design
- Adjusts seamlessly to various devices and screen sizes.
- Maintains readability and aesthetics on mobile or desktop.
Technical Summary
- Languages Used: HTML, CSS, JavaScript
- Design Techniques: Glassmorphism, video layering, transitions, and responsive layout
- Animation: CSS transitions for fade and transform effects
- Functionality: Overlay management, form validation, and keyboard accessibility
Conclusion
This Animated Fade-In Overlay Login Form with Video Background provides a visually rich and interactive login experience ideal for modern web applications. It balances performance, accessibility, and aesthetics, making it suitable for portfolio sites, dashboards, or high-end websites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Fade-In Overlay Login Form with Video Background</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.login-button {
padding: 12px 24px;
background: #40c4ff;
border: none;
border-radius: 25px;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(64, 196, 255, 0.3);
}
.login-button:hover {
background: #0288d1;
box-shadow: 0 6px 20px rgba(64, 196, 255, 0.5);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
.login-container {
background: rgba(255, 255, 255, 0.15);
padding: 40px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
transform: translateY(20px);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.overlay.active .login-container {
transform: translateY(0);
opacity: 1;
}
.login-container h2 {
color: #fff;
margin-bottom: 30px;
font-size: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
color: #fff;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}
.input-group input:focus {
border-color: #40c4ff;
box-shadow: 0 0 10px rgba(64, 196, 255, 0.5);
background: rgba(255, 255, 255, 0.2);
}
.input-group label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.8);
pointer-events: none;
transition: all 0.3s ease;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #40c4ff;
background: transparent;
}
button {
width: 100%;
padding: 12px;
background: #40c4ff;
border: none;
border-radius: 25px;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(64, 196, 255, 0.3);
}
button:hover {
background: #0288d1;
box-shadow: 0 6px 20px rgba(64, 196, 255, 0.5);
}
.error-message {
color: #ff5252;
margin-top: 10px;
display: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.close-button {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: color 0.3s ease;
}
.close-button:hover {
color: #40c4ff;
}
</style>
</head>
<body>
<video autoplay muted loop playsinline>
<source src="https://assets.mixkit.co/videos/preview/mixkit-aerial-view-of-a-coastline-at-sunset-4135-large.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button class="login-button" onclick="showLoginForm()">Login</button>
<div class="overlay" id="overlay">
<button class="close-button" onclick="hideLoginForm()">×</button>
<div class="login-container">
<h2>Login</h2>
<div class="input-group">
<input type="text" id="username" placeholder=" " required>
<label for="username">Username</label>
</div>
<div class="input-group">
<input type="password" id="password" placeholder=" " required>
<label for="password">Password</label>
</div>
<button onclick="handleLogin()">Login</button>
<div class="error-message" id="error-message">Invalid username or password</div>
</div>
</div>
<script>
function showLoginForm() {
document.getElementById('overlay').classList.add('active');
}
function hideLoginForm() {
document.getElementById('overlay').classList.remove('active');
}
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
if (username === '' || password === '') {
errorMessage.style.display = 'block';
} else {
errorMessage.style.display = 'none';
// Simulate login (replace with actual authentication logic)
alert('Login successful! Username: ' + username);
hideLoginForm();
}
}
// Allow login with Enter key
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && document.getElementById('overlay').classList.contains('active')) {
handleLogin();
}
});
</script>
</body>
</html>