Glassmorphism UI Login Form Design Using HTML & CSS

HTML <div class="content"> <div class="text">Login Form</div> <form action="#"> <div class="field"> <span class="fa fa-user"></span> <input type="text" placeholder="Email Id" required> </div> <div class="field"> <span class="fa fa-user"></span> <input type="password" placeholder="Password" required> </div> <!-- exter links--> <div class="forgot-pass"><a href="#" >Forgot Password?</a></div> <button>Sign in</button> <div class="signup">Not a member? <a href="#">Signup now</a></div> </form> </div> CSS /* now add css code */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins',sans-serif; } body{ display: grid; place-items: center; text-align: center; background: #102057; height: 100%; } /*before*/ body::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#fa9d74,#eb0069); clip-path: polygon(30% 10%, 50% 40%, 30% 75%, 10% 40%); } /* after*/ body::after{ content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(#f50202, #1928f5); clip-path: circle(20% at 70% 75%); } .content{ width: 330px; border-radius: 10px; padding: 40px 30px; position: relative; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; z-index: 10; top: 100px; backdrop-filter: blur(15px); border-top: 1px solid rgba(255,255,255,0.2); border-left: 1px solid rgba(255,255,255,0.2); box-shadow: 5px 5px 30px rgba(0,0,0,0.2); } .content .text{ font-size: 33px; font-weight: 600; margin-bottom: 35px; color: white; } .content .field{ height: 50px; width: 100%; display: flex; position: relative; } .field input{ height: 100%; width: 100%; padding-left: 45px; font-size: 18px; outline: none; border: none; color: #f5f5f5; background: #dde1e7; border-radius: 25px; background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.2); border-left: 1px solid rgba(255,255,255,0.2); box-shadow: 5px 5px 30px rgba(0,0,0,0.2); } .field:nth-child(2){ margin-top: 20px; } .field span{ position: absolute; width: 50px; line-height: 50px; color: #595959; } .forgot-pass{ text-align: left; margin: 10px 0 10px 5px; } .forgot-pass a{ font-size: 16px; color: white; text-decoration: none; } /* hover*/ .forgot-pass:hover a{ text-decoration: underline; } button{ margin: 15px 0; width: 100%; height: 50px; color: #a8a8a5; font-size: 18px; font-weight:600; background: #dde1e7; border: none; cursor: pointer; outline: none; border-radius: 25px; background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.2); border-left: 1px solid rgba(255,255,255,0.2); box-shadow: 5px 5px 30px rgba(0,0,0,0.2); } .signup{ font-size: 16px; color: white; margin: 10px 0; } .signup a{ color: white; text-decoration: none; } .signup a:hover{ text-decoration: underline; } JavaScript No Javascript