3+ Login Components - Vanilla CSS

Login forms are essential components of websites that require user authentication, allowing users to securely access their accounts. With HTML and CSS, creating stylish and functional login forms is achievable without the need for complex scripting or external libraries. In this collection, we've gathered a variety of HTML and CSS login form designs that you can seamlessly incorporate into your website. Whether you're building a social network, an e-commerce platform, or a member portal, our collection offers options to enhance the login experience and improve security. Let's explore how HTML and CSS login forms can simplify access to your website's accounts and provide a seamless login experience for your users!

Dynamic Profile Login Page

Enhance user experience with a dynamic profile login page. Learn how to implement a login page that offers personalized access and user recognition.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />



<div class="login">
  <img src="https://github.com/frontend-joe/css-logins/blob/main/login-4/profile.png?raw=true" />
  <h3>Welcome back</h3>
  <h2>Jay Bennett</h2>

  <form class="login-form">
    <input type="password" placeholder="Enter your passcode" />
    <button type="submit">LOGIN</button>
    <a href="https://website.com">Forgot your passcode?</a>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 25% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-4/background.svg");
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 5s infinite alternate linear;
}

.login {
  width: 70%;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #ffffff;
  text-align: center;
  margin: 20px 0;
}

.login > img {
  width: 160px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

.login > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 30px;
}

.login > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 6px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  display: grid;
  gap: 20px;
  place-items: center;
  width: 100%;
  margin: 0;
}

.login-form > input,
.login-form > button {
  height: 56px;
  width: 100%;
  outline: none;
  padding: 0;
  border-radius: 10px;
  font-family: inherit;
}

.login-form > input {
  background: #eeeeee;
  border: 0;
  font-size: 18px;
  padding: 0;
  text-align: center;
}

.login-form > button {
  cursor: pointer;
  height: 56px;
  background: #685aff;
  color: #f9f9f9;
  border: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.login-form > a {
  color: #685aff;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
}

```
No need of JavaScript
```

Login Page with Avatar

Elevate your login page with avatar integration. Learn how to create a personalized login experience by allowing users to associate avatars with their accounts.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />



<div class="login">
  <div class="avatar">
    <img src="https://github.com/frontend-joe/css-logins/blob/main/login-3/avatar.png?raw=true" />
  </div>
  <h2>Login</h2>
  <h3>Welcome back Kelly</h3>

  <form class="login-form">
    <div class="textbox">
      <input type="email" placeholder="Username" />
      <span class="material-symbols-outlined"> account_circle </span>
    </div>
    <div class="textbox">
      <input type="password" placeholder="Password" />
      <span class="material-symbols-outlined"> lock </span>
    </div>
    <button type="submit">LOGIN</button>
    <a href="https://website.com">Forgot your credentials?</a>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes gradient {
  100% {
    background-size: 4000px 1000px;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-3/bg.svg");
  background-size: 2000px 1000px;
  background-position: -500px 0;
  color: #f9f9f9;
  font-family: "Poppins";
  animation: gradient 10s infinite alternate linear;
}

@media (width >= 500px) {
  body {
    padding: 0;
  }
}

.login {
  width: 90%;
  padding: 70px 30px 44px;
  border-radius: 22px;
  background: #161616;
  text-align: center;
  margin: 20px 0;
}

@media (width >= 450px) {
  .login {
    width: 380px;
  }
}

.avatar {
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(-45deg, #157ae1, #c7a1ff);
  padding: 2px;
  width: 120px;
  height: 120px;
}

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;

  border: 4px solid #161616;
}

.login > h2 {
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 4px;
}

.login > h3 {
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 16px;
}

.login-form {
  display: grid;
  gap: 16px;
  place-items: center;
  width: 100%;
  margin: 0;
}

.textbox {
  width: 100%;
  position: relative;
}

.textbox span {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  color: rgba(255, 255, 255, 0.38);
}

.login-form input,
.login-form button {
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  border-radius: 8px;
}

.login-form input {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  padding: 0 20px 0 50px;
  color: inherit;
}

.login-form input:focus {
  border-color: #157ae1;
}

.login-form input:focus ~ span {
  color: #157ae1;
}

.login-form button {
  cursor: pointer;
  background: #157ae1;
  color: #f9f9f9;
  border: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.login-form a {
  color: #157ae1;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}

```
No need of JavaScript
```

Simple Login Form

Enhance user experience on your website with a simple login form. Learn how to create a user-friendly login form layout that facilitates seamless access for users, improving usability and engagement.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<div class="login-card">
  <h2>Login</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <input type="text" placeholder="Username" />
    <input type="password" placeholder="Password" />
    <a href="https://website.com">Forgot your password?</a>
    <button type="submit">LOGIN</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 15% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 6s infinite alternate linear;
}

@media (width >= 500px) {
  body {
    padding: 0;
  }
}

.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 20px;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
}

@media (width >= 500px) {
  .login-card {
    margin: 0;
    width: 400px;
  }
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px;
}

.login-card > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

.login-form > input,
.login-form > button {
  width: 100%;
  height: 56px;
}

.login-form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 16px;
}

.login-form > button {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 0.5rem;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.login-form > a {
  color: #216ce7;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  margin-bottom: 6px;
}

```
No need of JavaScript
```

Login with Password Toggle

Enhance user experience on your login forms with a password visibility toggle. Learn how to implement a toggle button that allows users to easily toggle between password visibility and hidden mode.

Author: Joe

Preview
Code

<div class="login-card">
  <h2>Login</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <input
      spellcheck="false"
      class="control"
      type="text"
      placeholder="Username"
    />
    <div class="password">
      <input
        spellcheck="false"
        class="control"
        id="password"
        type="password"
        placeholder="Password"
      />
      <button
        class="toggle"
        type="button"
        onclick="togglePassword(this)"
      ></button>
    </div>
    <button class="control" type="button">LOGIN</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Inter Var";
  color: #3a334e;
  animation: rotate 1s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #edeaf7;
  color: #5a4f79;
  font-family: inherit;
  font-size: 16px;
  transition: 0.4s;
}

.login-card {
  width: 400px;
  padding: 100px 30px 64px;
  border-radius: 1.25rem;
  background: #ffffff;
  text-align: center;
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
}

.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

.login-form input.control::placeholder {
  color: #aaa7bc;
}

.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #703eff;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.password {
  position: relative;
}

.toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/show.svg");
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}

.toggle.showing {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/hide.svg");
}

const togglePassword = (button) => {
  button.classList.toggle("showing");
  const input = document.getElementById("password");
  input.type = input.type === "password" ? "text" : "password";
};