1. AuraGlass Login: The Dynamic Hues Edition
Step into a world where your login form isn't just functional, it's a piece of art. The AuraGlass Login combines striking glassmorphism with subtle, ambient background gradients that pulse and shift. Its floating labels are not just practical; they're an integral part of the aesthetic, offering a seamless user experience that feels intuitive and premium. This design screams 2026 with its depth, transparency, and animated flair.
● LIVE PREVIEW
Interactive
SOURCE CODE
<style>
.aura-glass-login-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px; /* Ensures visible area for the form */
background: linear-gradient(135deg, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
background-size: 400% 400%;
animation: auraGradient 15s ease infinite;
padding: 20px;
box-sizing: border-box;
border-radius: 15px; /* Added for contained display */
overflow: hidden; /* Added for contained display */
position: relative;
z-index: 1; /* Ensure z-index for children */
color: #fff;
}
@keyframes auraGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.aura-glass-login-form {
background: rgba(255, 255, 255, 0.15); /* Slightly less opaque */
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px); /* Increased blur */
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3); /* Slightly more prominent border */
padding: 40px; /* Increased padding */
width: 100%;
max-width: 380px; /* Slightly wider */
text-align: center;
position: relative;
z-index: 2;
}
.aura-glass-login-form h3 {
color: #fff;
margin-bottom: 30px; /* More space */
font-size: 2em; /* Larger title */
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.aura-glass-input-group {
position: relative;
margin-bottom: 30px; /* Increased spacing between fields */
}
.aura-glass-input-group label {
position: absolute;
top: 15px; /* Adjusted initial position */
left: 20px; /* Adjusted initial position */
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
transition: all 0.3s ease;
font-size: 1em;
}
.aura-glass-input-group input {
width: calc(100% - 40px); /* Account for padding */
padding: 15px 20px; /* More padding for taller inputs */
background: rgba(255, 255, 255, 0.1); /* Subtle input background */
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #fff;
font-size: 1.1em;
outline: none;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.aura-glass-input-group input:focus {
border-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter on focus */
}
.aura-glass-input-group.aura-input-focused label,
.aura-glass-input-group.aura-input-filled label {
top: -10px; /* Moved higher */
left: 10px; /* Slightly inset */
font-size: 0.85em; /* Smaller font */
color: rgba(255, 255, 255, 0.9); /* Brighter */
background: rgba(0,0,0,0.3); /* Small background for better readability over glass */
padding: 2px 8px;
border-radius: 4px;
z-index: 10;
}
.aura-glass-button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
border: none;
border-radius: 8px;
color: #fff;
font-size: 1.2em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.aura-glass-button:hover {
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
.aura-glass-links {
margin-top: 25px;
font-size: 0.9em;
}
.aura-glass-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
margin: 0 10px;
transition: color 0.3s ease;
}
.aura-glass-links a:hover {
color: #fff;
text-decoration: underline;
}
</style>
<div class="aura-glass-login-container">
<form class="aura-glass-login-form">
<h3>Welcome Back!</h3>
<div class="aura-glass-input-group">
<input type="text" id="ag-email" required>
<label for="ag-email">Email Address</label>
</div>
<div class="aura-glass-input-group">
<input type="password" id="ag-password" required>
<label for="ag-password">Password</label>
</div>
<button type="submit" class="aura-glass-button">Login</button>
<div class="aura-glass-links">
<a href="#">Forgot Password?</a> | <a href="#">Sign Up</a>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const agInputGroups = document.querySelectorAll('.aura-glass-input-group');
agInputGroups.forEach(group => {
const input = group.querySelector('input');
// Initial check for pre-filled inputs
if (input.value !== '') {
group.classList.add('aura-input-filled');
}
input.addEventListener('focus', () => {
group.classList.add('aura-input-focused');
});
input.addEventListener('blur', () => {
group.classList.remove('aura-input-focused');
if (input.value !== '') {
group.classList.add('aura-input-filled');
} else {
group.classList.remove('aura-input-filled');
}
});
});
});
</script>2. QuantumGlass Signup: Frosted Edge & Adaptive Labels
The QuantumGlass Signup form pushes the envelope with its multi-layered glassmorphism, featuring a subtly frosted border that gives it a unique depth. This design emphasizes clarity and user guidance, with adaptive floating labels that not only move but also subtly change hue to indicate focus or validation states (though the hue change is left as an exercise for the reader here for brevity). It's a testament to minimalist elegance fused with sophisticated interaction.
● LIVE PREVIEW
Interactive
SOURCE CODE
<style>
.quantum-glass-signup-container {
font-family: 'Inter', sans-serif; /* A modern, clean font */
display: flex;
justify-content: center;
align-items: center;
min-height: 450px;
background: linear-gradient(145deg, #a7e6f8, #c6e0ff); /* Lighter, futuristic background */
padding: 20px;
box-sizing: border-box;
border-radius: 15px;
overflow: hidden;
position: relative;
z-index: 1;
color: #333; /* Darker text for contrast on light background */
}
.quantum-glass-blob-1, .quantum-glass-blob-2 {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
filter: blur(80px); /* Heavy blur for soft glow */
animation: quantumBlobMove 20s infinite alternate;
z-index: 0;
}
.quantum-glass-blob-1 {
width: 250px; height: 250px;
top: 10%; left: 10%;
background: rgba(170, 220, 255, 0.5);
animation-duration: 25s;
}
.quantum-glass-blob-2 {
width: 300px; height: 300px;
bottom: 15%; right: 15%;
background: rgba(255, 200, 240, 0.5);
animation-duration: 20s;
}
@keyframes quantumBlobMove {
0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
25% { transform: translate(20px, -30px) scale(1.05); opacity: 0.8; }
50% { transform: translate(-10px, 40px) scale(0.95); opacity: 0.6; }
75% { transform: translate(30px, 10px) scale(1.1); opacity: 0.9; }
100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}
.quantum-glass-signup-form {
background: rgba(255, 255, 255, 0.2);
border-radius: 20px; /* More rounded */
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1); /* Softer shadow */
backdrop-filter: blur(12px); /* Stronger blur */
-webkit-backdrop-filter: blur(12px);
border: 2px solid rgba(255, 255, 255, 0.6); /* Prominent, frosted border */
padding: 45px;
width: 100%;
max-width: 420px; /* A bit wider for signup fields */
text-align: center;
position: relative;
z-index: 2;
overflow: hidden; /* For inner frost effect */
}
.quantum-glass-signup-form::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.8);
pointer-events: none;
z-index: -1;
}
.quantum-glass-signup-form h3 {
color: #333;
margin-bottom: 35px;
font-size: 2.2em; /* Larger title */
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.quantum-glass-input-field {
position: relative;
margin-bottom: 30px;
text-align: left;
}
.quantum-glass-input-field label {
position: absolute;
top: 18px; /* Initial position */
left: 20px;
color: rgba(51, 51, 51, 0.7);
pointer-events: none;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
font-size: 1.05em;
z-index: 10;
}
.quantum-glass-input-field input {
width: calc(100% - 40px);
padding: 18px 20px; /* Taller input fields */
background: rgba(255, 255, 255, 0.3); /* Lighter background for inputs */
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px; /* Slightly more rounded inputs */
color: #333;
font-size: 1.15em;
outline: none;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.quantum-glass-input-field input:focus {
border-color: rgba(100, 180, 255, 0.8); /* Focus color */
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.3); /* Subtle glow on focus */
}
.quantum-glass-input-field.qg-input-focused label,
.quantum-glass-input-field.qg-input-filled label {
top: -12px;
left: 10px;
font-size: 0.8em;
color: #007bff; /* Bright blue for active label */
background: rgba(255, 255, 255, 0.9); /* Clearer background for label */
padding: 3px 8px;
border-radius: 6px;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.quantum-glass-submit-btn {
width: 100%;
padding: 18px;
background: linear-gradient(45deg, #007bff, #00c6ff); /* Blue gradient */
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.3em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}
.quantum-glass-submit-btn:hover {
background: linear-gradient(45deg, #00c6ff, #007bff);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
transform: translateY(-2px);
}
.quantum-glass-terms {
margin-top: 25px;
font-size: 0.9em;
color: rgba(51, 51, 51, 0.8);
}
.quantum-glass-terms a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
.quantum-glass-terms a:hover {
color: #0056b3;
text-decoration: underline;
}
</style>
<div class="quantum-glass-signup-container">
<div class="quantum-glass-blob-1"></div>
<div class="quantum-glass-blob-2"></div>
<form class="quantum-glass-signup-form">
<h3>Join the Future!</h3>
<div class="quantum-glass-input-field">
<input type="text" id="qg-username" required>
<label for="qg-username">Username</label>
</div>
<div class="quantum-glass-input-field">
<input type="email" id="qg-email-signup" required>
<label for="qg-email-signup">Email</label>
</div>
<div class="quantum-glass-input-field">
<input type="password" id="qg-password-signup" required>
<label for="qg-password-signup">Password</label>
</div>
<div class="quantum-glass-input-field">
<input type="password" id="qg-confirm-password" required>
<label for="qg-confirm-password">Confirm Password</label>
</div>
<button type="submit" class="quantum-glass-submit-btn">Sign Up</button>
<p class="quantum-glass-terms">
By signing up, you agree to our <a href="#">Terms of Service</a>.
</p>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const qgInputFields = document.querySelectorAll('.quantum-glass-input-field');
qgInputFields.forEach(field => {
const input = field.querySelector('input');
// Initial check for pre-filled inputs
if (input.value !== '') {
field.classList.add('qg-input-filled');
}
input.addEventListener('focus', () => {
field.classList.add('qg-input-focused');
});
input.addEventListener('blur', () => {
field.classList.remove('qg-input-focused');
if (input.value !== '') {
field.classList.add('qg-input-filled');
} else {
field.classList.remove('qg-input-filled');
}
});
});
});
</script>3. ChameleonGlass Unified Form: Dynamic Theming & Liquid Focus
The ChameleonGlass Unified Form is a masterclass in adaptability and visual fluidity. This design showcases advanced glassmorphism where the form's transparency subtly adapts to a dynamically changing background, creating an illusion of depth and integration. Floating labels here are enhanced with a 'liquid focus' effect, drawing the user's eye and providing immediate feedback. It's a single, versatile form that exemplifies futuristic elegance and user-centric design.
● LIVE PREVIEW
Interactive
SOURCE CODE
<style>
.chameleon-glass-container {
font-family: 'Roboto', sans-serif; /* A classic, versatile font */
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
background: linear-gradient(135deg, #FF6F61, #DE4351); /* Initial warm gradient */
background-size: 300% 300%;
animation: chameleonBg 20s ease infinite alternate; /* Animated background */
padding: 20px;
box-sizing: border-box;
border-radius: 15px;
overflow: hidden;
position: relative;
z-index: 1;
color: #fff;
}
@keyframes chameleonBg {
0% { background-position: 0% 50%; background-image: linear-gradient(135deg, #FF6F61, #DE4351); }
25% { background-position: 50% 100%; background-image: linear-gradient(135deg, #6a11cb, #2575fc); }
50% { background-position: 100% 50%; background-image: linear-gradient(135deg, #1abc9c, #16a085); }
75% { background-position: 50% 0%; background-image: linear-gradient(135deg, #e74c3c, #c0392b); }
100% { background-position: 0% 50%; background-image: linear-gradient(135deg, #FF6F61, #DE4351); }
}
.chameleon-glass-form {
background: rgba(255, 255, 255, 0.1); /* Very subtle base transparency */
border-radius: 25px; /* Even more rounded */
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px); /* Stronger blur */
-webkit-backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.4); /* Clear glass border */
padding: 50px;
width: 100%;
max-width: 400px;
text-align: center;
position: relative;
z-index: 2;
transition: background-color 0.5s ease; /* Smooth transition for glass color */
}
.chameleon-glass-form h3 {
color: #fff;
margin-bottom: 40px;
font-size: 2.3em;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.chameleon-glass-input-wrapper {
position: relative;
margin-bottom: 35px;
text-align: left;
}
.chameleon-glass-input-wrapper label {
position: absolute;
top: 20px;
left: 20px;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
transition: all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy transition */
font-size: 1.1em;
z-index: 10;
background: transparent; /* Ensure no background for initial label */
padding: 0 5px;
}
.chameleon-glass-input-wrapper input {
width: calc(100% - 40px);
padding: 20px; /* Generous padding */
background: rgba(255, 255, 255, 0.08); /* Even subtler input background */
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px; /* Very rounded inputs */
color: #fff;
font-size: 1.2em;
outline: none;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.chameleon-glass-input-wrapper input:focus {
border-color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); /* Soft white glow */
}
.chameleon-glass-input-wrapper.cg-active label,
.chameleon-glass-input-wrapper.cg-filled label {
top: -15px;
left: 15px;
font-size: 0.9em;
color: #fff;
background: linear-gradient(90deg, #6d28d9, #9333ea); /* Dynamic label background */
padding: 4px 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.chameleon-glass-input-wrapper.cg-active label {
transform: translateY(-2px); /* Slight lift on active */
}
.chameleon-glass-btn {
width: 100%;
padding: 18px;
background: linear-gradient(45deg, #00C9FF, #92FE9D); /* Vibrant, changing gradient */
border: none;
border-radius: 12px;
color: #000;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease-in-out;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.chameleon-glass-btn:hover {
background: linear-gradient(45deg, #92FE9D, #00C9FF);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transform: translateY(-3px) scale(1.01);
}
.chameleon-glass-meta {
margin-top: 30px;
font-size: 1em;
}
.chameleon-glass-meta a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
margin: 0 12px;
transition: color 0.3s ease;
}
.chameleon-glass-meta a:hover {
color: #fff;
text-decoration: underline;
}
</style>
<div class="chameleon-glass-container">
<form class="chameleon-glass-form">
<h3>Login / Register</h3>
<div class="chameleon-glass-input-wrapper">
<input type="text" id="cg-username-email" required>
<label for="cg-username-email">Username or Email</label>
</div>
<div class="chameleon-glass-input-wrapper">
<input type="password" id="cg-password" required>
<label for="cg-password">Password</label>
</div>
<button type="submit" class="chameleon-glass-btn">Proceed</button>
<div class="chameleon-glass-meta">
<a href="#">Forgot?</a> | <a href="#">Need an Account?</a>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cgInputWrappers = document.querySelectorAll('.chameleon-glass-input-wrapper');
cgInputWrappers.forEach(wrapper => {
const input = wrapper.querySelector('input');
// Initial check for pre-filled inputs
if (input.value !== '') {
wrapper.classList.add('cg-filled');
}
input.addEventListener('focus', () => {
wrapper.classList.add('cg-active');
});
input.addEventListener('blur', () => {
wrapper.classList.remove('cg-active');
if (input.value !== '') {
wrapper.classList.add('cg-filled');
} else {
wrapper.classList.remove('cg-filled');
}
});
});
});
</script>๐ More Resources
Check out related content:
Looking for a production-ready component with Props & Logic?
⚛️ Need Logic? Get React/Next.js Components →โน️ Note: Code is generated for educational purposes.
Comments
Post a Comment