Liquid Glass Login & Sign Up Form – HTML CSS

50 0 Forms CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<form id="login" class="panel active" novalidate>
    <h2>Welcome back</h2>
    <label class="field"><input type="email" required placeholder=" "><span>Email</span></label>
    <label class="field"><input type="password" required minlength="6" placeholder=" "><span>Password</span>
      <button type="button" class="eye" aria-label="Show password">👁</button></label>
    <div class="row"><label class="check"><input type="checkbox"> Remember me</label><a href="#">Forgot?</a></div>
    <button class="glass btn" type="submit">Log in</button>
    <p class="msg"></p>
  </form>

<form id="signup" class="panel" novalidate>
    <h2>Create account</h2>
    <label class="field"><input type="text" required placeholder=" "><span>Full name</span></label>
    <label class="field"><input type="email" required placeholder=" "><span>Email</span></label>
    <label class="field"><input type="password" required minlength="6" placeholder=" "><span>Password (6+ chars)</span>
      <button type="button" class="eye" aria-label="Show password">👁</button></label>
    <button class="glass btn" type="submit">Sign up</button>
    <p class="msg"></p>
  </form>
</main>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; display: grid; place-items: center;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  background: #0b1020; color: #fff; overflow: hidden;
}
.blobs span {
  position: fixed; border-radius: 50%; filter: blur(10px); opacity: .9;
  animation: float 14s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { width: 380px; height: 380px; background: #ff5f9e; top: 8%; left: 12%; }
.blobs span:nth-child(2) { width: 320px; height: 320px; background: #3fa9ff; bottom: 6%; right: 10%; animation-delay: -5s; }
.blobs span:nth-child(3) { width: 240px; height: 240px; background: #ffd34d; top: 55%; left: 40%; animation-delay: -9s; }
@keyframes float { to { transform: translate(60px, -40px) scale(1.15); } }

/* Liquid glass material */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.1),
              0 20px 50px rgba(0,0,0,.35);
}
.glass::before { /* specular highlight that follows the cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.28), transparent 60%);
}
.card { width: min(400px, 92vw); padding: 28px; border-radius: 32px; }

.tabs { position: relative; display: flex; background: rgba(0,0,0,.18); border-radius: 99px; padding: 4px; margin-bottom: 22px; }
.tab { flex: 1; z-index: 1; border: 0; background: none; color: #fff; padding: 10px; font-weight: 600; cursor: pointer; font-size: .95rem; }
.pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px;
  background: rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .5s cubic-bezier(.5,1.8,.4,.8); }
.tabs.right .pill { transform: translateX(100%); }

.panel { display: none; flex-direction: column; gap: 16px; animation: in .45s ease; }
.panel.active { display: flex; }
@keyframes in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
h2 { font-weight: 700; font-size: 1.6rem; margin-bottom: 4px; }

.field { position: relative; display: block; }
.field input {
  width: 100%; padding: 22px 44px 8px 16px; border-radius: 16px; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); outline: none; transition: .25s;
}
.field input:focus { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.field span { position: absolute; left: 16px; top: 15px; opacity: .7; pointer-events: none; transition: .2s; }
.field input:focus + span, .field input:not(:placeholder-shown) + span { top: 6px; font-size: .72rem; opacity: .9; }
.field.bad input { border-color: #ff7a8a; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.eye { position: absolute; right: 10px; top: 12px; background: none; border: 0; cursor: pointer; font-size: 1.1rem; opacity: .7; }

.row { display: flex; justify-content: space-between; font-size: .88rem; }
.row a { color: #fff; opacity: .8; }
.check { display: flex; gap: 6px; align-items: center; }

.btn { border-radius: 99px; padding: 14px; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform .2s, filter .2s; }
.btn:hover { transform: scale(1.03); filter: brightness(1.15); }
.btn:active { transform: scale(.97); filter: url(#liquid) brightness(1.2); }
.msg { min-height: 1.2em; text-align: center; font-size: .9rem; }

// Liquid Glass Login / Sign up
var tabs = document.querySelector('.tabs');
document.querySelectorAll('.tab').forEach(function (t) {
  t.addEventListener('click', function () {
    document.querySelectorAll('.tab').forEach(function (x) { x.classList.toggle('active', x === t); });
    document.querySelectorAll('.panel').forEach(function (p) { p.classList.toggle('active', p.id === t.dataset.tab); });
    tabs.classList.toggle('right', t.dataset.tab === 'signup');
  });
});

// moving specular highlight
document.querySelectorAll('.glass').forEach(function (g) {
  g.addEventListener('pointermove', function (e) {
    var r = g.getBoundingClientRect();
    g.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    g.style.setProperty('--my', (e.clientY - r.top) + 'px');
  });
});

// show / hide password
document.querySelectorAll('.eye').forEach(function (b) {
  b.addEventListener('click', function () {
    var i = b.parentElement.querySelector('input');
    i.type = i.type === 'password' ? 'text' : 'password';
  });
});

// validation
document.querySelectorAll('form').forEach(function (f) {
  f.addEventListener('submit', function (e) {
    e.preventDefault();
    var ok = true;
    f.querySelectorAll('.field').forEach(function (fl) {
      var i = fl.querySelector('input');
      var bad = !i.checkValidity();
      fl.classList.remove('bad'); void fl.offsetWidth;
      if (bad) { fl.classList.add('bad'); ok = false; }
    });
    var msg = f.querySelector('.msg');
    msg.textContent = ok ? (f.id === 'login' ? '✓ Logged in (demo)' : '✓ Account created (demo)') : 'Please check the highlighted fields';
    msg.style.color = ok ? '#9dffcf' : '#ffb3bd';
  });
});

Comments 0

…

Liquid Glass Login & Sign Up Form – HTML CSS

Recommended

Comments 0