Project Gallery
Explore Glass Auth | Login & Signup in detail
2
/2
100%
100%
Project Overview
Glass Auth | Login & Signup
Project Description
This design showcases a modern glassmorphism aesthetic with frosted glass effects, backdrop blur, and semi-transparent elements that create depth and elegance. Smooth transitions enhance interactivity, including animated toggles between login and register forms, hover effects, and fade-in animations for form elements. The layout is fully responsive and mobile-friendly, ensuring accessibility across all devices.
From a user experience perspective, it offers practical features such as password visibility toggles, social login options, and clear form validation for seamless usability. Visually, the design is elevated with gradient backgrounds, stylish buttons, decorative icons, and a consistent color scheme, resulting in a polished and professional interface.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Auth | Login & Signup</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="design-container">
<div class="design-content">
<h2>Welcome to GlassAuth</h2>
<p>Join our community and discover a world of possibilities</p>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div>
<h4>Secure Authentication</h4>
<p>Your data is always protected</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-bolt"></i>
</div>
<div>
<h4>Fast & Reliable</h4>
<p>Lightning fast authentication</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-users"></i>
</div>
<div>
<h4>User Management</h4>
<p>Easy account control</p>
</div>
</div>
</div>
</div>
</div>
<div class="form-container">
<div class="form-toggle">
<div class="toggle-bg"></div>
<div class="toggle-btn active" id="loginToggle">Login</div>
<div class="toggle-btn" id="registerToggle">Register</div>
</div>
<!-- Login Form -->
<form class="auth-form active" id="loginForm">
<h2 class="form-title">Welcome Back</h2>
<p class="form-subtitle">Sign in to continue to your account</p>
<div class="form-group">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required id="loginPassword">
<i class="fas fa-eye-slash password-toggle" id="loginPasswordToggle"></i>
</div>
<div class="checkbox-group">
<input type="checkbox" id="rememberMe">
<label for="rememberMe">Remember me</label>
<a href="#" style="margin-left: auto; color: #667eea; text-decoration: none;">Forgot Password?</a>
</div>
<button type="submit" class="btn">Sign In</button>
<div class="divider">
<span>Or continue with</span>
</div>
<div class="social-auth">
<a href="#" class="social-btn"><i class="fab fa-google"></i></a>
<a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-btn"><i class="fab fa-twitter"></i></a>
</div>
<div class="form-footer">
Don't have an account? <a href="#" id="showRegisterLink">Sign Up</a>
</div>
</form>
<!-- Register Form -->
<form class="auth-form" id="registerForm">
<h2 class="form-title">Create Account</h2>
<p class="form-subtitle">Join us today for exclusive access</p>
<div class="form-group">
<i class="fas fa-user"></i>
<input type="text" class="form-control" placeholder="Full Name" required>
</div>
<div class="form-group">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required id="registerPassword">
<i class="fas fa-eye-slash password-toggle" id="registerPasswordToggle"></i>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="Confirm Password" required id="registerConfirmPassword">
<i class="fas fa-eye-slash password-toggle" id="registerConfirmPasswordToggle"></i>
</div>
<div class="checkbox-group">
<input type="checkbox" id="termsAgree">
<label for="termsAgree">I agree to the <a href="#" style="color: #667eea;">Terms and Conditions</a></label>
</div>
<button type="submit" class="btn">Create Account</button>
<div class="divider">
<span>Or sign up with</span>
</div>
<div class="social-auth">
<a href="#" class="social-btn"><i class="fab fa-google"></i></a>
<a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-btn"><i class="fab fa-twitter"></i></a>
</div>
<div class="form-footer">
Already have an account? <a href="#" id="showLoginLink">Sign In</a>
</div>
</form>
</div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #00c6ff 0%, #0072ff 30%, #7f00ff 70%, #e100ff 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 1000px;
display: flex;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.design-container {
flex: 1;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
position: relative;
overflow: hidden;
}
.design-container::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 50%;
top: -150px;
left: -150px;
}
.design-container::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 50%;
bottom: -100px;
right: -100px;
}
.design-content {
position: relative;
z-index: 1;
text-align: center;
}
.design-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.design-content p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
max-width: 300px;
}
.feature-list {
text-align: left;
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.feature-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.form-container {
flex: 1;
padding: 40px;
background: white;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-toggle {
display: flex;
margin-bottom: 30px;
background: #f0f0f0;
border-radius: 50px;
padding: 5px;
position: relative;
}
.toggle-btn {
flex: 1;
padding: 12px;
text-align: center;
cursor: pointer;
z-index: 1;
font-weight: 600;
transition: color 0.3s ease;
}
.toggle-bg {
position: absolute;
width: 50%;
height: calc(100% - 10px);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50px;
top: 5px;
left: 5px;
transition: transform 0.3s ease;
}
.toggle-bg.register {
transform: translateX(100%);
}
.toggle-btn.active {
color: white;
}
.auth-form {
display: none;
animation: fadeIn 0.5s ease forwards;
}
.auth-form.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.form-title {
font-size: 1.8rem;
margin-bottom: 10px;
color: #333;
}
.form-subtitle {
color: #777;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group i {
position: absolute;
left: 15px;
top: 14px;
color: #777;
}
.form-control {
width: 100%;
padding: 12px 15px 12px 45px;
border: 1px solid #ddd;
border-radius: 50px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.password-toggle {
position: absolute;
right: 15px;
top: 14px;
color: #777;
cursor: pointer;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.checkbox-group input {
margin-right: 10px;
}
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.divider {
display: flex;
align-items: center;
margin: 20px 0;
}
.divider::before, .divider::after {
content: "";
flex: 1;
height: 1px;
background: #ddd;
}
.divider span {
padding: 0 15px;
color: #777;
font-size: 14px;
}
.social-auth {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-btn:hover {
background: #667eea;
color: white;
transform: translateY(-3px);
}
.form-footer {
text-align: center;
margin-top: 20px;
color: #777;
}
.form-footer a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.design-container {
display: none;
}
.form-container {
padding: 30px;
}
}
</style>JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const loginToggle = document.getElementById('loginToggle');
const registerToggle = document.getElementById('registerToggle');
const showRegisterLink = document.getElementById('showRegisterLink');
const showLoginLink = document.getElementById('showLoginLink');
const toggleBg = document.querySelector('.toggle-bg');
const loginPasswordToggle = document.getElementById('loginPasswordToggle');
const loginPassword = document.getElementById('loginPassword');
const registerPasswordToggle = document.getElementById('registerPasswordToggle');
const registerPassword = document.getElementById('registerPassword');
const registerConfirmPasswordToggle = document.getElementById('registerConfirmPasswordToggle');
const registerConfirmPassword = document.getElementById('registerConfirmPassword');
// Toggle between forms
function showLogin() {
loginForm.classList.add('active');
registerForm.classList.remove('active');
loginToggle.classList.add('active');
registerToggle.classList.remove('active');
toggleBg.classList.remove('register');
}
function showRegister() {
loginForm.classList.remove('active');
registerForm.classList.add('active');
loginToggle.classList.remove('active');
registerToggle.classList.add('active');
toggleBg.classList.add('register');
}
loginToggle.addEventListener('click', showLogin);
registerToggle.addEventListener('click', showRegister);
showRegisterLink.addEventListener('click', function(e) {
e.preventDefault();
showRegister();
});
showLoginLink.addEventListener('click', function(e) {
e.preventDefault();
showLogin();
});
// Password toggle functionality
loginPasswordToggle.addEventListener('click', function() {
if (loginPassword.type === 'password') {
loginPassword.type = 'text';
loginPasswordToggle.classList.remove('fa-eye-slash');
loginPasswordToggle.classList.add('fa-eye');
} else {
loginPassword.type = 'password';
loginPasswordToggle.classList.remove('fa-eye');
loginPasswordToggle.classList.add('fa-eye-slash');
}
});
registerPasswordToggle.addEventListener('click', function() {
if (registerPassword.type === 'password') {
registerPassword.type = 'text';
registerPasswordToggle.classList.remove('fa-eye-slash');
registerPasswordToggle.classList.add('fa-eye');
} else {
registerPassword.type = 'password';
registerPasswordToggle.classList.remove('fa-eye');
registerPasswordToggle.classList.add('fa-eye-slash');
}
});
registerConfirmPasswordToggle.addEventListener('click', function() {
if (registerConfirmPassword.type === 'password') {
registerConfirmPassword.type = 'text';
registerConfirmPasswordToggle.classList.remove('fa-eye-slash');
registerConfirmPasswordToggle.classList.add('fa-eye');
} else {
registerConfirmPassword.type = 'password';
registerConfirmPasswordToggle.classList.remove('fa-eye');
registerConfirmPasswordToggle.classList.add('fa-eye-slash');
}
});
// Form validation
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
// Add your login logic here
alert('Login functionality would be implemented here!');
});
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
// Add your registration logic here
alert('Registration functionality would be implemented here!');
});
});
</script>