INTRODUCTION TO GLASSMORPHISM
Glassmorphism is a design trend characterized by semi-transparent backgrounds, subtle shadows, and blurred backdrops that create a "frosted glass" effect. Each of these 100 forms features unique glassmorphism variations with different color schemes, blur intensities, border styles, and animations.
ESSENTIAL GLASSMORPHISM CSS FRAMEWORK
<?php // glass_framework.php - Include in all forms $glass_styles = " <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; position: relative; overflow-x: hidden; } /* Dynamic Background Generator */ .bg-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .bg-2 { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); } .bg-3 { background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } .bg-4 { background: linear-gradient(to right, #00b4db, #0083b0); } .bg-5 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .bg-6 { background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%); } .bg-7 { background: linear-gradient(120deg, #fa709a 0%, #fee140 100%); } .bg-8 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } .bg-9 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); } .bg-10 { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); } /* Glassmorphism Base Classes */ .glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } .glass-light { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .glass-dark { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: white; } .glass-colored { background: rgba(102, 126, 234, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.3); } /* Input Styles */ .glass-input { width: 100%; padding: 15px; margin: 10px 0; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; color: inherit; font-size: 16px; transition: all 0.3s ease; } .glass-input:focus { outline: none; background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } .glass-input::placeholder { color: rgba(255, 255, 255, 0.7); } .glass-button { width: 100%; padding: 15px; margin: 10px 0; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); } .glass-button:hover { background: rgba(255, 255, 255, 0.4); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Container Styles */ .glass-container { width: 400px; padding: 40px; margin: 20px; } /* Decorative Elements */ .circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); z-index: -1; } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> "; ?> FORM 1: BASIC GLASSMORPHISM LOGIN
<?php // glass_login_1.php require_once 'glass_framework.php'; session_start(); if($_POST){ $username = $_POST['username'] ?? ''; $password = $_POST['password'] ?? ''; if($username == 'demo' && $password == 'demo123'){ $_SESSION['user'] = $username; header('Location: dashboard.php'); } else { $error = "Invalid credentials!"; } } ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism Login #1 - Basic</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .glass-container { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border-radius: 20px; } </style> </head> <body> <div class="glass-container"> <h2 style="color: white; text-align: center; margin-bottom: 30px;">🔐 Glass Login</h2> <?php if(isset($error)): ?> <div style="background: rgba(255, 0, 0, 0.3); padding: 10px; border-radius: 10px; color: white; margin-bottom: 20px;"> <?php echo $error; ?> </div> <?php endif; ?> <form method="POST"> <input type="text" class="glass-input" name="username" placeholder="Username" required> <input type="password" class="glass-input" name="password" placeholder="Password" required> <button type="submit" class="glass-button">Login</button> </form> <p style="color: white; text-align: center; margin-top: 20px;"> Demo: demo / demo123 </p> </div> </body> </html> FORM 2: GLASSMORPHISM WITH ANIMATED BACKGROUND
<?php // glass_login_2.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #2 - Animated BG</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(270deg, #ff6b6b, #4ecdc4, #667eea, #764ba2); background-size: 800% 800%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); } .floating-shapes { position: absolute; width: 100%; height: 100%; z-index: -1; } .shape { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 6s infinite; } </style> </head> <body> <div class="floating-shapes"> <div class="shape" style="width: 200px; height: 200px; top: 10%; left: 10%; animation-delay: 0s;"></div> <div class="shape" style="width: 150px; height: 150px; top: 60%; right: 10%; animation-delay: 2s;"></div> <div class="shape" style="width: 100px; height: 100px; bottom: 10%; left: 20%; animation-delay: 4s;"></div> </div> <div class="glass-container glass"> <h2 style="color: white; text-align: center;">✨ Animated Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 3: DARK GLASSMORPHISM
<?php // glass_login_3.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #3 - Dark Mode</title> <?php echo $glass_styles; ?> <style> body { background: #1a1a1a; background-image: radial-gradient(circle at 30% 50%, #333, #111); } .glass-dark-custom { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8); } h2 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } input { background: rgba(0, 0, 0, 0.3); color: white; } input::placeholder { color: rgba(255, 255, 255, 0.5); } </style> </head> <body> <div class="glass-container glass-dark-custom"> <h2>🌙 Dark Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 4: NEON GLASSMORPHISM
<?php // glass_login_4.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #4 - Neon</title> <?php echo $glass_styles; ?> <style> body { background: #000; } .neon-glass { background: rgba(0, 255, 255, 0.1); backdrop-filter: blur(10px); border: 2px solid #0ff; box-shadow: 0 0 50px #0ff, 0 0 100px rgba(0, 255, 255, 0.3); } h2 { color: #0ff; text-shadow: 0 0 20px #0ff; } .neon-input { background: rgba(0, 255, 255, 0.05); border: 1px solid #0ff; color: #0ff; } .neon-input:focus { box-shadow: 0 0 30px #0ff; } .neon-button { background: rgba(0, 255, 255, 0.2); border: 1px solid #0ff; color: #0ff; text-shadow: 0 0 10px #0ff; } .neon-button:hover { background: rgba(0, 255, 255, 0.3); box-shadow: 0 0 40px #0ff; } .particle { position: absolute; width: 2px; height: 2px; background: #0ff; box-shadow: 0 0 10px #0ff; animation: floatParticle 3s infinite; } @keyframes floatParticle { 0%, 100% { transform: translate(0, 0); opacity: 0; } 50% { opacity: 1; } } </style> </head> <body> <?php for($i=0; $i<50; $i++): ?> <div class="particle" style="top: <?php echo rand(0, 100); ?>%; left: <?php echo rand(0, 100); ?>%; animation-delay: <?php echo rand(0, 3000)/1000; ?>s;"></div> <?php endfor; ?> <div class="glass-container neon-glass"> <h2>💫 Neon Glass</h2> <form method="POST"> <input type="text" class="glass-input neon-input" placeholder="Username"> <input type="password" class="glass-input neon-input" placeholder="Password"> <button class="glass-button neon-button">Login</button> </form> </div> </body> </html> FORM 5: PASTEL GLASSMORPHISM
<?php // glass_login_5.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #5 - Pastel</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #ffd1d1, #ffe6b0, #c1e1c1, #b5d0e6); background-size: 400% 400%; animation: softGradient 10s ease infinite; } @keyframes softGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .pastel-glass { background: rgba(255, 240, 245, 0.3); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px rgba(255, 200, 220, 0.3); } h2 { color: #8b6b7b; } .pastel-input { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); color: #6b4e5e; } .pastel-input::placeholder { color: #a88b9b; } .pastel-button { background: rgba(255, 210, 220, 0.4); color: #6b4e5e; } .flower-decoration { position: absolute; font-size: 40px; opacity: 0.3; animation: float 6s infinite; } </style> </head> <body> <div class="flower-decoration" style="top: 10%; left: 10%;">🌸</div> <div class="flower-decoration" style="bottom: 10%; right: 10%;">🌼</div> <div class="flower-decoration" style="top: 20%; right: 20%;">🌺</div> <div class="glass-container pastel-glass"> <h2>🌸 Pastel Glass</h2> <form method="POST"> <input type="text" class="glass-input pastel-input" placeholder="Username"> <input type="password" class="glass-input pastel-input" placeholder="Password"> <button class="glass-button pastel-button">Login</button> </form> </div> </body> </html> FORM 6: RAINBOW GLASSMORPHISM
<?php // glass_login_6.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #6 - Rainbow</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff); background-size: 400% 100%; animation: rainbow 10s linear infinite; } @keyframes rainbow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } .rainbow-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 2px solid transparent; border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff) 1; animation: borderRainbow 3s linear infinite; } @keyframes borderRainbow { 0% { border-image-source: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff); } 100% { border-image-source: linear-gradient(405deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff); } } h2 { background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } </style> </head> <body> <div class="glass-container rainbow-glass"> <h2>🌈 Rainbow Glass</h2> <form method="POST"> <input type="text" class="glass-input" style="background: rgba(255,255,255,0.2); color: white;" placeholder="Username"> <input type="password" class="glass-input" style="background: rgba(255,255,255,0.2); color: white;" placeholder="Password"> <button class="glass-button" style="background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff); color: white;">Login</button> </form> </div> </body> </html> FORM 7: MINIMALIST GLASSMORPHISM
<?php // glass_login_7.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #7 - Minimalist</title> <?php echo $glass_styles; ?> <style> body { background: #f5f5f5; } .minimal-glass { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 350px; } h2 { color: #333; font-weight: 300; letter-spacing: 2px; } .minimal-input { background: transparent; border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); border-radius: 0; padding-left: 0; color: #333; } .minimal-input:focus { border-bottom-color: #667eea; box-shadow: none; } .minimal-button { background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); color: #333; transition: all 0.3s; } .minimal-button:hover { border-color: #667eea; color: #667eea; background: transparent; } </style> </head> <body> <div class="glass-container minimal-glass"> <h2>minimal</h2> <form method="POST"> <input type="text" class="glass-input minimal-input" placeholder="username"> <input type="password" class="glass-input minimal-input" placeholder="password"> <button class="glass-button minimal-button">→</button> </form> </div> </body> </html> FORM 8: 3D GLASSMORPHISM
<?php // glass_login_8.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #8 - 3D Effect</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(45deg, #0f2027, #203a43, #2c5364); perspective: 1000px; } .glass-3d { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); transform: rotateX(5deg) rotateY(5deg); transform-style: preserve-3d; animation: float3D 6s ease-in-out infinite; } @keyframes float3D { 0%, 100% { transform: rotateX(5deg) rotateY(5deg) translateY(0); } 50% { transform: rotateX(3deg) rotateY(3deg) translateY(-20px); } } .glass-3d::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; filter: blur(20px); z-index: -1; transform: translateZ(-20px); } .glass-3d::after { content: ''; position: absolute; top: 10px; left: 10px; right: -10px; bottom: -10px; background: rgba(0, 0, 0, 0.1); filter: blur(10px); z-index: -2; } </style> </head> <body> <div class="glass-container glass-3d"> <h2 style="color: white;">3D Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 9: FROSTED GLASS SIGNUP
<?php // glass_signup_9.php require_once 'glass_framework.php'; if($_POST){ $name = $_POST['name'] ?? ''; $email = $_POST['email'] ?? ''; $password = $_POST['password'] ?? ''; $confirm = $_POST['confirm_password'] ?? ''; $errors = []; if(strlen($name) < 3) $errors[] = "Name too short"; if(!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = "Invalid email"; if(strlen($password) < 6) $errors[] = "Password too short"; if($password != $confirm) $errors[] = "Passwords don't match"; if(empty($errors)){ $success = "Account created successfully!"; } } ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #9 - Frosted Signup</title> <?php echo $glass_styles; ?> <style> body { background: url('https://images.unsplash.com/photo-1557683316-973673baf926') no-repeat center; background-size: cover; } .frosted-glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; } h2 { color: white; font-weight: 300; text-transform: uppercase; letter-spacing: 4px; } .error-box { background: rgba(255, 99, 71, 0.3); border: 1px solid rgba(255, 99, 71, 0.5); color: white; padding: 10px; border-radius: 10px; margin-bottom: 20px; } .success-box { background: rgba(50, 205, 50, 0.3); border: 1px solid rgba(50, 205, 50, 0.5); color: white; padding: 10px; border-radius: 10px; margin-bottom: 20px; } </style> </head> <body> <div class="glass-container frosted-glass" style="width: 450px;"> <h2>Create Account</h2> <?php if(!empty($errors)): ?> <div class="error-box"> <?php foreach($errors as $error): ?> <div>• <?php echo $error; ?></div> <?php endforeach; ?> </div> <?php endif; ?> <?php if(isset($success)): ?> <div class="success-box"><?php echo $success; ?></div> <?php endif; ?> <form method="POST"> <input type="text" class="glass-input" name="name" placeholder="Full Name" required> <input type="email" class="glass-input" name="email" placeholder="Email Address" required> <input type="password" class="glass-input" name="password" placeholder="Password" required> <input type="password" class="glass-input" name="confirm_password" placeholder="Confirm Password" required> <div style="display: flex; gap: 10px; margin: 20px 0;"> <input type="checkbox" id="terms" style="width: auto;"> <label for="terms" style="color: white; font-size: 14px;">I agree to the Terms and Conditions</label> </div> <button type="submit" class="glass-button">Sign Up</button> </form> <p style="color: white; text-align: center; margin-top: 20px;"> Already have an account? <a href="#" style="color: white; font-weight: bold;">Login</a> </p> </div> </body> </html> FORM 10: GRADIENT GLASS LOGIN
<?php // glass_login_10.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #10 - Gradient Glass</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(45deg, #fc466b, #3f5efb); } .gradient-glass { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2)); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); } h2 { background: linear-gradient(45deg, #fff, #f0f0f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <div class="glass-container gradient-glass"> <h2>Gradient Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 11: HOLOGRAPHIC GLASS
<?php // glass_login_11.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #11 - Holographic</title> <?php echo $glass_styles; ?> <style> body { background: #000; } .holographic-glass { background: linear-gradient(135deg, rgba(255,0,0,0.2), rgba(0,255,0,0.2), rgba(0,0,255,0.2)); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); position: relative; overflow: hidden; } .holographic-glass::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff, #ff0000 ); animation: rotate 10s linear infinite; mix-blend-mode: overlay; opacity: 0.3; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } h2 { color: white; text-shadow: 0 0 20px rgba(255,255,255,0.5); position: relative; z-index: 1; } </style> </head> <body> <div class="glass-container holographic-glass"> <h2>🌈 Holographic</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 12: CRYSTAL GLASS LOGIN
<?php // glass_login_12.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #12 - Crystal</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #00c6fb, #005bea); } .crystal-glass { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 20px 50px rgba(0,0,0,0.3), inset 0 0 30px rgba(255,255,255,0.5); position: relative; } .crystal-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); border-radius: 20px 20px 0 0; } .reflection { position: absolute; top: 10px; left: 20px; width: 60px; height: 60px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%); border-radius: 50%; opacity: 0.5; } </style> </head> <body> <div class="glass-container crystal-glass"> <div class="reflection"></div> <h2 style="color: white;">💎 Crystal</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 13: DUAL GLASS PANELS
<?php // glass_login_13.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #13 - Dual Panels</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #0b1926, #1d3b5c); display: flex; gap: 30px; flex-wrap: wrap; } .panel-left, .panel-right { width: 350px; padding: 40px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; } .panel-left { transform: rotate(-2deg); } .panel-right { transform: rotate(2deg); background: rgba(0, 0, 0, 0.2); } h3 { color: white; margin-bottom: 30px; font-weight: 300; letter-spacing: 2px; } .divider { display: flex; align-items: center; text-align: center; color: white; margin: 20px 0; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .divider::before { margin-right: 10px; } .divider::after { margin-left: 10px; } </style> </head> <body> <div class="panel-left"> <h3>LOGIN</h3> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Sign In</button> </form> </div> <div class="panel-right"> <h3>SIGN UP</h3> <form method="POST"> <input type="text" class="glass-input" placeholder="Full Name"> <input type="email" class="glass-input" placeholder="Email"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Create Account</button> </form> </div> <div style="width: 100%; text-align: center; color: white;"> <div class="divider">OR</div> <button class="glass-button" style="width: 200px; margin: 10px auto;">Continue with Google</button> </div> </body> </html> FORM 14: BUBBLE GLASS
<?php // glass_login_14.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #14 - Bubble</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #00b4db, #0083b0); overflow: hidden; } .bubble-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; width: 400px; height: 500px; position: relative; overflow: hidden; } .bubble { position: absolute; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%); border-radius: 50%; animation: bubbleFloat 4s ease-in-out infinite; } @keyframes bubbleFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } } .bubble:nth-child(1) { width: 100px; height: 100px; top: 10%; left: 10%; animation-delay: 0s; } .bubble:nth-child(2) { width: 70px; height: 70px; top: 50%; right: 10%; animation-delay: 1s; } .bubble:nth-child(3) { width: 130px; height: 130px; bottom: 10%; left: 20%; animation-delay: 2s; } </style> </head> <body> <div class="bubble-glass"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div style="padding: 80px 40px;"> <h2 style="color: white; text-align: center;">Bubble Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </div> </body> </html> FORM 15: GLASS CARD WITH PROFILE
<?php // glass_profile_login_15.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #15 - Profile Card</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #667eea, #764ba2); } .profile-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 30px; width: 380px; text-align: center; } .avatar { width: 100px; height: 100px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); margin: -50px auto 20px; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 40px; color: white; } .social-icons { display: flex; justify-content: center; gap: 20px; margin: 20px 0; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: white; transition: all 0.3s; } .social-icon:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } </style> </head> <body> <div class="glass-container profile-glass"> <div class="avatar">👤</div> <h2 style="color: white;">Welcome Back</h2> <p style="color: rgba(255,255,255,0.8); margin-bottom: 30px;">Sign in to continue</p> <form method="POST"> <input type="text" class="glass-input" placeholder="Username or Email"> <input type="password" class="glass-input" placeholder="Password"> <div style="text-align: right; margin: 10px 0;"> <a href="#" style="color: white; font-size: 14px;">Forgot Password?</a> </div> <button class="glass-button">Login</button> </form> <div class="social-icons"> <a href="#" class="social-icon">f</a> <a href="#" class="social-icon">g</a> <a href="#" class="social-icon">in</a> <a href="#" class="social-icon">t</a> </div> <p style="color: white; margin-top: 20px;"> Don't have an account? <a href="#" style="color: white; font-weight: bold;">Sign Up</a> </p> </div> </body> </html> FORM 16: GLASS WITH LIQUID EFFECT
<?php // glass_liquid_16.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #16 - Liquid Glass</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); } .liquid-glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: liquidMorph 8s ease-in-out infinite; width: 450px; height: 550px; } @keyframes liquidMorph { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; } 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } 75% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; } } .wave-bg { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1), transparent 50%); animation: waveMove 10s linear infinite; } @keyframes waveMove { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); } } </style> </head> <body> <div class="liquid-glass" style="display: flex; align-items: center; justify-content: center;"> <div style="width: 80%;"> <div class="wave-bg"></div> <h2 style="color: white; text-align: center; position: relative;">💧 Liquid Glass</h2> <form method="POST" style="position: relative;"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </div> </body> </html> FORM 17: NEUMORPHIC GLASS
<?php // glass_neumorphic_17.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #17 - Neumorphic Glass</title> <?php echo $glass_styles; ?> <style> body { background: #e0e0e0; } .neumorph-glass { background: rgba(224, 224, 224, 0.5); backdrop-filter: blur(10px); border-radius: 50px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff, inset 0 0 0 1px rgba(255,255,255,0.5); } .neumorph-input { background: #e0e0e0; box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; border: none; color: #333; } .neumorph-input:focus { box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff; } .neumorph-button { background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; border: none; color: #666; } .neumorph-button:hover { box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff; } </style> </head> <body> <div class="glass-container neumorph-glass"> <h2 style="color: #666; text-align: center;">Neumorph Glass</h2> <form method="POST"> <input type="text" class="glass-input neumorph-input" placeholder="Username"> <input type="password" class="glass-input neumorph-input" placeholder="Password"> <button class="glass-button neumorph-button">Login</button> </form> </div> </body> </html> FORM 18: GLASS WITH SNOWFALL
<?php // glass_snow_18.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #18 - Winter Glass</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(to bottom, #a8edea, #fed6e3); position: relative; } .winter-glass { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); } .snowflake { position: absolute; color: white; user-select: none; pointer-events: none; animation: snowfall linear infinite; } @keyframes snowfall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } h2 { color: #2c3e50; } </style> </head> <body> <?php for($i=0; $i<100; $i++): ?> <div class="snowflake" style=" left: <?php echo rand(0, 100); ?>%; font-size: <?php echo rand(10, 30); ?>px; animation-duration: <?php echo rand(5, 15); ?>s; animation-delay: -<?php echo rand(0, 10); ?>s; opacity: <?php echo rand(50, 100)/100; ?>; ">❄️</div> <?php endfor; ?> <div class="glass-container winter-glass"> <h2>❄️ Winter Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 19: GLASS WITH FIREFLIES
<?php // glass_fireflies_19.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #19 - Firefly Glass</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #0b1926, #1d3b5c); } .firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffffb0; box-shadow: 0 0 20px #ffffb0; animation: fly 8s linear infinite; } @keyframes fly { 0%, 100% { transform: translate(0, 0); opacity: 0.5; } 25% { transform: translate(100px, -50px); opacity: 1; } 50% { transform: translate(200px, 50px); opacity: 0.5; } 75% { transform: translate(300px, -100px); opacity: 1; } } </style> </head> <body> <?php for($i=0; $i<30; $i++): ?> <div class="firefly" style=" top: <?php echo rand(0, 100); ?>%; left: <?php echo rand(0, 100); ?>%; animation-delay: -<?php echo rand(0, 8); ?>s; "></div> <?php endfor; ?> <div class="glass-container"> <h2 style="color: white;">✨ Firefly Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> FORM 20: GLASS WITH RAIN EFFECT
<?php // glass_rain_20.php require_once 'glass_framework.php'; ?> <!DOCTYPE html> <html> <head> <title>Glassmorphism #20 - Rainy Glass</title> <?php echo $glass_styles; ?> <style> body { background: linear-gradient(135deg, #2c3e50, #3498db); } .rain-glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); position: relative; overflow: hidden; } .raindrop { position: absolute; width: 2px; height: 20px; background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent); animation: rain linear infinite; } @keyframes rain { 0% { transform: translateY(-100px); } 100% { transform: translateY(500px); } } .window-drip { position: absolute; width: 4px; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.2)); border-radius: 2px; animation: drip 3s ease-in infinite; } @keyframes drip { 0% { transform: translateY(-100px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(300px); opacity: 0; } } </style> </head> <body> <div class="glass-container rain-glass"> <?php for($i=0; $i<50; $i++): ?> <div class="raindrop" style=" left: <?php echo rand(0, 100); ?>%; animation-duration: <?php echo rand(1, 3); ?>s; animation-delay: -<?php echo rand(0, 3); ?>s; "></div> <?php endfor; ?> <?php for($i=0; $i<10; $i++): ?> <div class="window-drip" style=" left: <?php echo rand(10, 90); ?>%; animation-delay: -<?php echo rand(0, 3); ?>s; "></div> <?php endfor; ?> <h2 style="color: white; text-align: center;">🌧️ Rainy Glass</h2> <form method="POST"> <input type="text" class="glass-input" placeholder="Username"> <input type="password" class="glass-input" placeholder="Password"> <button class="glass-button">Login</button> </form> </div> </body> </html> Due to character limits, I'll continue with Forms 21-100 in subsequent responses. Each form will maintain the glassmorphism aesthetic with unique variations in:
Form 21-30: Color-themed glass (Ruby, Sapphire, Emerald, Amethyst, Topaz, etc.)
Form 31-40: Animated glass (Pulsing, Shimmering, Rotating, Wave, Ripple)
Form 41-50: Patterned glass (Stripes, Dots, Checkerboard, Honeycomb, Scales)
Form 51-60: Special effect glass (Glitch, Pixel, VHS, Retro, Vintage)
Form 61-70: Nature-inspired glass (Forest, Ocean, Sunset, Aurora, Galaxy)
Form 71-80: Abstract glass (Geometric, Fractal, Psychedelic, Mosaic, Kaleidoscope)
Form 81-90: Cultural glass (Japanese, Moroccan, Scandinavian, Indian, Egyptian)
Form 91-100: Fantasy glass (Dragon, Phoenix, Unicorn, Mermaid, Crystal)
Each form will include:
- Unique glassmorphism effects
- PHP form handling
- Responsive design
- Custom animations
- Interactive elements
- Proper validation
Would you like me to continue with Forms 21-100?