❤️ Glassy login form using HTML and CSS (free full source code included)❤️

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

In this article, I will show you how to create code using HTML and CSSGlass login form. You can transform any simple design into a glassy design. To do this, you only need to change a little code. First use background-color semi-transparent for exampleRgba (255255255,0.13). Secondly, we need to usebackdrop-filter: blur (10px)To blur the background. Finally, a border is needed to enhance the aesthetic.

❤️ Glass login form ❤️ using HTML and CSS

🎪 online demo address

Haiyong. Site/bolitailogi…

You can watch a live demo to see how it works. If you want to create a glassy login form using HTML and CSS code, follow this tutorial.

As you can see in the demo above, it is built just like a normal login form. Two colored circles have been created on the page.

🥇 Step 1: Design the web page

I designed the web page using the following small amount of CSS code. Here I used black as the background color of the page.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: # 080710;
}
Copy the code

Output:

🥈 Step 2: Create two colored circles in the background

I created two colored circles on the page using the following HTML and CSS code. Although these two circles were not part of the design, I created these two circles to design the background. However, in this case, you can use any other image.

The circle is 200 pixels wide and high, and uses 50% of the border radius to make it completely round. Position: absolute, so that they remain in the same position.

<div class="background">
   <div class="shape"></div>
   <div class="shape"></div>
</div>
Copy the code

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
Copy the code

Using the CSS code below, I designed both separately and used different colors. I used a blue and green gradient in the background of the first sphere. In the case of the second circle, I used a red and yellow gradient.

.shape:first-child{
    background: linear-gradient(
        #1845ad.#23a2f6
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f.#f09819
    );
    right: -30px;
    bottom: -80px;
}
Copy the code

Output:

📰 Step 3: Create the basic structure of the glass login form

We created the basic structure of this login form using the following HTML and CSS code. The glass effect login form is 400px wide and 520px high.

I used the background color translucency here. Border-radius: 10px to make the four corners slightly rounded. If you watch the demo, you’ll know that the colors in the background of this login form are a little blurry. For this, use backdrop filter: blur (10px).

<form>
</form>
Copy the code

form{
    height: 520px;
    width: 400px;
    background-color: rgba(255.255.255.0.13);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255.255.255.0.1);
    box-shadow: 0 0 40px rgba(8.7.16.0.6);
    padding: 50px 35px;
}
form* {font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5 px.;
    outline: none;
    border: none;
}
Copy the code

Output:

📲 Step 4: Add a title to the form

Now I’ve created a title in the form using this code. I used font size: 32px to increase the text size of the heading and text-align: center to keep the text in the middle.

<h3>Sea | login form</h3>
Copy the code

form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}
Copy the code

Output:

🎯 Step 5: Create an input location for input

Using the code below, I created a place to enter my email ID and password. To do this, I use the HTML input function. I used a 50px height input box and used a translucent background color.

<label for="username">The user name</label>
   <input type="text" placeholder="Email or Phone" id="username">

 <label for="password">password</label>
   <input type="password" placeholder="Password" id="password">
Copy the code

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255.255.255.0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
Copy the code

Output:

🏆 Step 6: Add a login button to the glass login form

I have now created a login button in the Glassmorphism login form. This login button has no specific size.

I have used padding to give this size. The background color of this button is all white, and font: 18px is used.

<button>The login</button>
Copy the code

button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: # 080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
Copy the code

Output:

🍺 Step 7: Create two social buttons

I created two social media buttons at the end. The two buttons are 150px in length and the background color is translucent.

Here I used the icon that I activated with the CDN link using font-awesome.

<div class="social">
   <a href="http://haiyong.site/moyu">
   	<div class="go"><i class="fas fa-gamepad"></i>The game</div>
   </a>
   <a href="http://haiyong.site/contact">
   	<div class="fb"><i class="far fa-comments"></i>contact</div>
   	</a>
 </div>
Copy the code

.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  background: red;
  width: 150px;
  border-radius: 3px;
  padding: 5px 10px 10px 5px;
  background-color: rgba(255.255.255.0.27);
  color: #eaf0fb;
  text-align: center;
}
.social div:hover{
  background-color: rgba(255.255.255.0.47);
}
.social .co{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
} 
Copy the code

Output:The glass login form we created with HTML and CSS is now complete.

🛬 wuhu! Take off!

Hopefully, you’ve learned how to create glass login forms using HTML and CSS. I’ve made many more types of widgets using HTML, CSS, and JavaScript, so you can look at these designs if you like.

A random password generator that uses HTML, CSS, and JavaScript for the Fire-breathing Dragon mini-game based on HTML, CSS, and Three.js Cool black theme analog clock using HTML, CSS and JS to create responsive filtered games + Tools display page Using HTML, CSS, JS and API to create a great Weather Web application Using HTML, CSS and API to create fully responsive mid Autumn Festival Gift cards

I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my tutorial on a Web online music player. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊

💌 welcomes your comments and suggestions in the comments section! 💌

🎡 Download the full source code

GitHub address: github.com/wanghao221 free source code can also be obtained through the public number [hai Yong] reply [code]

If you really learn something new from this article, like it, bookmark it and share it with your friends. 🤗 and finally, don’t forget ❤ or 📑.