<div class="form-container">

<form action="" id="form" > <h3>Login</h3>

<class class="container">

<span class="icon"><i class="fas fa-user"></i></span>

<input type="text" placeholder="username"/> <div class="container">

<span class="icon"><i class="fas

fa-at"></i></span>

<input type="email" placeholder="email"/> </div> <div class="container">

<span class="icon"><i class="fas fa-lock"></i></span>

<input type="password"

placeholder="password"/>

</div>

<input type="submit" value="login"> </form>
.form-container { min-height: 100vh; width: 100vw; display:flex; align-items: center; justify-content: center; background: url(bg-back.jpg) no-repeat;

background-size: cover;

background-position: center;

perspective: 1000px;
.form-container form{

height:450px; width:350px;

background: rgba(255,255,255,.1);

text-align: center;

align-items: center; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.3); border-left: 1px solid rgba(255,255,255,.3);

backdrop-filter: blur(10px); transform-style: preserve-3d;
.form-container form h3 { font-size: 30px; padding:30px 0; color: #ccc; letter-spacing: 3px; }

.form-container form i { padding:0.5px; font-size: 20px; color:#bbb;

}
.form-container form input { margin: 15px 0;

outline: none; border: none;

height:40px; width: 82%;

background: rgba(0,0,0,.1); color: rgba(255,255,255,.7);

box-shadow:0 0 5px rgba(0,0,0,.5) inset; font-size: 17px;

padding: 0 10px;

letter-spacing: 1px; border-radius: 15px;
.form-container form input[type="submit"] {

width:90%;

cursor: pointer; background:linear-gradient(90deg,

deeppink, blueviolet);

margin-top: 30px; border-radius: 50px;

}

.form-container form input[type="submit"]:hover

{

}

letter-spacing: 4px;