Modulo di accesso Gradient HTML CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 April 2025

HTML CSS Barra di navigazione moderna

23 February 2025

<!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 andres.stahr

HTML CSS Barra di navigazione moderna

Un codice di ha11072004cc

HTML

CSS

JS

Consigliato

Un codice di andres.stahr

HTML CSS Barra di navigazione moderna

Un codice di ha11072004cc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS