Hi Friends! hoping you are doing well, today on this blog I will show you the way to create glassmorphism registration or HTML & CSS registration Form.

What Is Glassmorphism:- Glassmorphism is a term used to describe UI design that emphasizes light or dark objects, placed on top of colorful backgrounds. A background blur is placed on the objects which allow the background to shine through – giving it the impression of frosted glass.

This Developing of Form We Use Main Parts of We HTML bio plate That is <!DOCTYPE HTML>

<html lang="en" dir="ltr"> is New of HTML5 Version margin: 0; , padding: 0; ,box-sizing: border-box;

Then The take the one waper section of Main Form Container of designed seating the some width and height of form

Also, We Using CSS3 New Versoin Fist We add *{} basic of CSS body structure

There are many top shape templates just like the signal-in shape, the touch form, and the registration shape I've created. However, the brand new shape of registration or subscription can be a touch higher than the preceding design. A registration or registration form is a system in which customers ought to fill in their details to acquire their own identification and password to access a particular website, software, or website. Allow's test the furnished image of our registration or registration shape. There are a complete of 4 enter fields in which users want to fill in their information and receive the terms and situations and click the sign in button now. Under, there are some textual content and hyperlinks for users to redirect to the login form. We are now going to take a look at the authentic demo of this program [html & css registration form template], animation inside the input area, and all of the code i used to create this registration or subscription form.

Registration or Sign up Form Template | Video Tutorial

You will get all the HTML and CSS code that I have used to create this beautiful Registration or Sign up Form Template. Before getting into the source code file, you need to know some important things about this program.

As you have seen on the video tutorial of this responsive registration or sign-up form. At first, you have seen four input fields some text, and a button. All the input fields have different placeholders like entering your name, password, and two for creating and confirming the password.

When I clicked on the input field, its border color changed from grey to blue, which helps the user experience more impressive isn't it?. To make this form I have used only HTML and CSS.

I hope now this type of registration or signup form would be piece of cake for you, if you are feeling difficulty creating this, I have provided all the HTML and CSS below.

Glassmorphism Registration or Sign up From Template [Source Code]

To take the source code of this Glassmorphism Registration or Sign up Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

HTML Code:

<!DOCTYPE html>
<!-- Coding by Coding Karunadu| www.CodingKarunadu.com-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Registration or Sign Up form in HTML CSS | CodingLab </title>
    <link rel="stylesheet" href="styles.css">
   </head>
<body>
    <div class="wrapper">
      <h2>Registration</h2>
      <form action="#">
        <div class="input-box">
          <input type="text" placeholder="Enter Your Name" required>
        </div>
        <div class="input-box">
          <input type="text" placeholder="Enter Your Email" required>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Create password" required>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Confirm password" required>
        </div>
        <div class="policy">
          <input type="checkbox">
          <h3>I Accept all terms & Condition</h3>
        </div>
        <div class="input-box button">
            <input type="submit" value="Register Now">
        </div>
        <div class="text">
          <h3>Alredy have an Account? <a href="#">Login Now</a></h3>
        </div>
      </form>
    </div>
</body>
</html>

CSS Code:

                
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4408b;
}

.wrapper{
  position: relative;
  max-width: 430px;
  width: 100%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(189, 51, 131, 0.37);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 34px;
}

.wrapper h2{
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #4070f4;
  border-radius: 12px;
}

.wrapper form{
  margin-top: 30px;
}

.wrapper form .input-box{
  height: 52px;
  margin: 18px 0;
}

form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(189, 51, 131, 0.37);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border-bottom-width: 2.5px;
  transition: all 0.3s ease;
}

.input-box input:focus,
.input-box input:valid{
  border-color: #4070f4;
}

form .policy{
  display: flex;
  align-items: center;
}

form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}

.input-box.button input{
  color: #fff;
  letter-spacing: 2px;
  border: none;
  background: #4070f4;
  cursor: pointer;
}

.input-box.button input:hover{
  background: #fff;
  color: #000;
}

Download Here

You have to wait 60 seconds.

Glassmorphism Registration or Sign up Form Template in HTML & CSS | Coding Karunadu

Registration or Sign up Form Template | Video Tutorial

You Might Like This:

Glassmorphism Registration or Sign up From Template [Source Code]

Download Here

نموذج الاتصال