Formulario de inicio de sesión de degradado HTML CSS

902 attack07

Abrir en el editor Publica tu código

Formulario de inicio de sesión de degradado HTML CSS

Recomendado

26 April 2025

Un código de lebronpaulsuarezz

30 March 2025

Un código de ytr3d3

8 October 2025

Fragmento de animación de carga de CSS

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>

Recomendado

Un código de lebronpaulsuarezz

Un código de ytr3d3

Fragmento de animación de carga de CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS