Plantilla HTML/CSS de formulario de inicio de sesión y registro

Abrir en el editor Publica tu código

Recomendado

31 May 2025

Plantilla HTML CSS para sitio web de desarrollador

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login / Sign Up</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
    }
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }

.container {
      width: 360px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 25px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: fadeIn 0.6s ease;
    }

.tabs {
      display: flex;
      cursor: pointer;
    }
    .tabs button {
      flex: 1;
      padding: 14px;
      border: none;
      background: #f0f0f0;
      font-size: 16px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .tabs button.active {
      background: #2a5298;
      color: #fff;
    }

.form {
      padding: 24px;
      display: none;
      animation: slide 0.4s ease;
    }
    .form.active { display: block; }

.form h2 {
      margin-bottom: 18px;
      color: #2a5298;
      font-size: 22px;
      text-align: center;
    }

.input-group {
      margin-bottom: 16px;
    }
    .input-group label {
      font-size: 14px;
      color: #333;
      display: block;
      margin-bottom: 6px;
    }
    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #bbb;
      border-radius: 8px;
      font-size: 15px;
    }

.form button {
      width: 100%;
      padding: 12px;
      background: #2a5298;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .form button:hover {
      background: #1e3c72;
    }

.extra {
      margin-top: 12px;
      text-align: center;
      font-size: 13px;
      color: #555;
    }
    .extra a {
      color: #2a5298;
      text-decoration: none;
      font-weight: 500;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9);}
      to { opacity: 1; transform: scale(1);}
    }
    @keyframes slide {
      from { opacity: 0; transform: translateY(12px);}
      to { opacity: 1; transform: translateY(0);}
    }
  </style>
</head>
<body>

<div class="container">
    <div class="tabs">
      <button class="tab active" onclick="showForm('login')">Login</button>
      <button class="tab" onclick="showForm('signup')">Sign Up</button>
    </div>

<form class="form active" id="login">
      <h2>Welcome Back</h2>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Enter your password" required>
      </div>
      <button type="submit">Login</button>
      <div class="extra">
        <a href="#">Forgot Password?</a>
      </div>
    </form>

<form class="form" id="signup">
      <h2>Create Account</h2>
      <div class="input-group">
        <label>Username</label>
        <input type="text" placeholder="Choose a username" required>
      </div>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Create a password" required>
      </div>
      <button type="submit">Sign Up</button>
    </form>
  </div>

document.getElementById(formId).classList.add('active');
    event.target.classList.add('active');
  }
</script>

</body>
</html>

CSS

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Background with gradient + glow */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

/* Decorative glowing orbs */
body::before, body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
body::before {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: rgba(0, 212, 255, 0.6);
}
body::after {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -100px;
  background: rgba(255, 0, 180, 0.5);
}

/* Container (glass effect) */
.container {
  width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: fadeIn 0.8s ease;
}

/* Tabs */
.tabs {
  display: flex;
}
.tabs button {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.3s ease;
  cursor: pointer;
}
.tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
}

/* Forms */
.form {
  padding: 24px;
  display: none;
  animation: slide 0.4s ease;
}
.form.active { display: block; }

.form h2 {
  margin-bottom: 18px;
  font-size: 24px;
  text-align: center;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Input groups */
.input-group {
  margin-bottom: 18px;
}
.input-group label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.input-group input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

/* Buttons */
.form button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7),
              0 0 30px rgba(255, 0, 180, 0.6);
}

/* Extra links */
.extra {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.extra a {
  color: #00d4ff;
  text-decoration: none;
  font-weight: 500;
}
.extra a:hover {
  text-decoration: underline;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9);}
  to { opacity: 1; transform: scale(1);}
}
@keyframes slide {
  from { opacity: 0; transform: translateY(15px);}
  to { opacity: 1; transform: translateY(0);}
}

Plantilla HTML/CSS de formulario de inicio de sesión y registro

Recomendado

Un código de alejandrokundrah

Jardín de fallas

Plantilla HTML CSS para sitio web de desarrollador

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Jardín de fallas

Plantilla HTML CSS para sitio web de desarrollador

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS