Led login form

Open In Editor Video 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>Andev Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
  </div>

<div class="login">
    <h2>Login</h2>
    <div class="inputBox">
      <input type="text" required>
      <span>Username</span>
    </div>
    <div class="inputBox">
      <input type="password" required>
      <span>Password</span>
    </div>
    <div class="inputBox">
      <input type="submit" value="Sign in">
    </div>
    <div class="group">
    <a href="#">Forgot Password</a>
    <a href="#">Sign up</a>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  font-family: 'Poppins', sans-serif;
}
.container{
  display: grid;
  grid-template-columns: repeat(3,150px);
  grid-gap: 4px;
}
/*Andev Web*/
.container .box{
  position: relative;
  width: 150px;
  height: 150px;
  background: rgba(45, 45, 45, 1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before{
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--clr), transparent, transparent);
  width: 300px;
  height: 300px;
  transition: 0.5s, top 0.1s,left 0.1s;
}
.container .box::after{
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.9);
}
.login{
  position: absolute;
  width: 450px;
  height: 600px;
  padding: 60px 40px;
  text-align: center;
  pointer-events: none;
}
.login h2{
  color: #fff;
  font-size: 2em;
  margin-bottom: 60px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox{
  position: relative;
  width: 100%;
  margin-top: 30px;
}
.login .inputBox input{
  width: 100%;
  padding: 20px 25px;
  outline: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: rgba(255, 255, 255, 0.25);
  border: 1px solid #000;
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox span{
  position: absolute;
  left: 0;
  padding: 20px 25px;
  font-size: 1em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: 0.25s;
  pointer-events: none;
}
.login .inputBox input:focus ~ span,
.login .inputBox input:valid ~ span{
  transform: translate(15px, -10px);
  font-size: 0.75em;
  background: #fff;
  color: #222;
  padding: 2px 5px;
  border: 1px solid #000;
}
.login .inputBox input[type="submit"]{
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 500;
  transition: 0.25s;
}
.login .inputBox input[type="submit"]:hover{
  background: #0f0;
  color: #222;
  border: 1px solid transparent;
}
.group{
  position: relative;
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.group a{
  color: #222;
  background: #fff;
  padding: 2px 5px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  border-radius: 4px;
  pointer-events: all;
}
.group a:nth-child(2){
  background: #f0f;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 0 15px #f0f, 0 0 30px #f0f, 0 0 60px #f0f;
}

Led login form

Recommended

HTML Login Form Template with Social Login

HTML Login Form Example

3d form

HTML

CSS

JS

Recommended

HTML Login Form Template with Social Login

HTML Login Form Example

3d form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS