Formulario de inicio de sesión de degradado HTML CSS

2,008 attack07

Abrir en el editor Publica tu código

Formulario de inicio de sesión de degradado HTML CSS

Recomendado

16 December 2024

Un código de meriem

12 September 2025

Efecto de animación de brillo circular CSS

5 August 2025

Calculadora de hipotenusa: HTML, JavaScript, Canvas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Gradient Login Form</title>
  <style>
    /* Body background gradient */
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #667eea, #764ba2);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

/* Form container */
    .login-box {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      width: 300px;
      color: #fff;
    }

.login-box h2 {
      text-align: center;
      margin-bottom: 30px;
    }

/* Input fields */
    .login-box input[type="text"],
    .login-box input[type="password"] {
      width: 90%;
      padding: 12px 15px;
      margin: 10px 0;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 8px;
      color: #fff;
      outline: none;
    }

/* Placeholder text */
    ::placeholder {
      color: #ddd;
    }

/* Login button */
    .login-box button {
      width: 100%;
      padding: 12px;
      background: linear-gradient(to right, #ff758c, #ff7eb3);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      margin-top: 20px;
      transition: 0.3s;
    }

.login-box button:hover {
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <div class="login-box">
    <h2>Login</h2>
    <form>
      <input type="text" placeholder="Username" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

CSS