100 GLASSMORPHISM LOGIN & SIGNUP FORMS IN PHP 1-20

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?