Blur Login

blur-login.markdown

Blur Login

A Pen by John Andrade on CodePen.

License.

index.html

<div class="window">
  <span class="h1">Sign In</span>
  <form>
    <input type="email" class="mt-4 form-control" placeholder="Your email">
    <input type="password" class="mt-2 form-control" placeholder="Your password">
    <input type="submit" class="mb-2 btn btn-light mt-2" value="Sign In">
    <small>You do not have an account? <a href="#" class="text-warning">Sign up</a></small>
  </form>
</div>

style.css

body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:url('https://images.unsplash.com/photo-1550236520-7050f3582da0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1575&q=80');
  background-size:cover;
  background-position:center;
}

.window{
  width:400px;
  height:380px;
  padding:40px;
  text-align:center;
  border:1px solid white;
  border-radius:20px;
  
  backdrop-filter:blur(20px) brightness(200%);
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
}
input[type="email"], input[type="password"]{
  border-radius:8px;
  border:1px solid white;
  color:white !important;
  background:transparent;
}
form{
  width:100%;
}
input[type="email"]:focus, input[type="password"]:focus{
  background:#00000040;
  box-shadow:none;

  border:1px solid white;
}
input[type="email"]::placeholder, input[type="password"]::placeholder{
  color:white;
}
input[type="submit"]{
  width:100%;
  border-radius:8px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:14px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />