Modulo di accesso Gradient HTML CSS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

30 December 2024

<!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>

Modulo di accesso Gradient HTML CSS

Consigliato

Un codice di cleancloud199

Frazione di animazione

Input HTML animato

HTML

CSS

JS

Consigliato

Un codice di cleancloud199

Frazione di animazione

Input HTML animato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS