Gradient Login Form HTML CSS

Open In Editor Publish Your Code

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

Gradient Login Form HTML CSS

Recommended

Bootstrap Responsive Register Form

Idea Form

CSS Gradient Button

HTML

CSS

JS

Recommended

Bootstrap Responsive Register Form

Idea Form

CSS Gradient Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS