DEV Community

Cover image for Glassmorphism Login Form using only HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on • Edited on

Glassmorphism Login Form using only HTML & CSS

#html #css #webdev #beginners

In this article, I am going to show you how to create Glassmorphism Login Form using HTML and CSS code.

You can convert any simple design to a Glassmorphism design. For this, you need to change a little bit of code. First use background-color semi-transparent such as rgba (255,255,255,0.13).

Secondly, you need to use backdrop-filter: blur (10px) to blur the background a bit. In the end, you need to use a border to enhance its beauty.

You can watch the live demo to see how it works. If you want to create Glassmorphism Login Form using HTML and CSS code then follow the tutorial below.

It is built just like a normal login form as you saw in the demo above. Two colorful circles have been created on web page.

Step 1: Design the web page

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



*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #080710;
}
Enter fullscreen mode Exit fullscreen mode

Design the web page

Step 2: Create two colorful circles in the background

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

This circle is 200 px in width and height and a 50% border radius has been used to make it completely round. position: made absolute so that it stays in the same place.



<div class="background">
   <div class="shape"></div>
   <div class="shape"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 


.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%;
}
Enter fullscreen mode Exit fullscreen mode

Using the CSS codes below, I designed the two separately and used different colors. I used a blue gradient in the background of the first sphere. In the case of the second circle, I have used the gradient color of red.



.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;
}
Enter fullscreen mode Exit fullscreen mode

Create two colorful circles in the background

Step 3: Create the basic structure of Glassmorphism Login Form

We have created the basic structure of this login form using the following HTML and CSS code. This GlassMorphism Effects Login Form has a width of 400px and a height of 520px.

I have used background-color semi-transparent here. Border-radius: 10px has been used to make the four somewhat round. If you watch the demo, you will understand that the colors in the background of this login form are a bit blurry. For this backdrop-filter: blur (10px) has been used.



 <form>

 </form>
Enter fullscreen mode Exit fullscreen mode 


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.5px;
    outline: none;
    border: none;
}
Enter fullscreen mode Exit fullscreen mode

Create the basic structure of Glassmorphism Login Form

Step 4: Add headings to the form

Now using these codes I have created a heading in the form. I have used font-size: 32px to increase the text size of that heading and text-align: center has been used to keep the text in the middle.



<h3>Login Here</h3>
Enter fullscreen mode Exit fullscreen mode 


form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Add headings to the form

Step 5: Create input place to input

Using the codes below, I've created a place to input email IDs and passwords. For this, I have used the input function of HTML. I used 50px height of input space and used background-color semi-transparent.



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

 <label for="password">Password</label>
   <input type="password" placeholder="Password" id="password">
Enter fullscreen mode Exit fullscreen mode 


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;
}
Enter fullscreen mode Exit fullscreen mode

Create input place to input

Step 6: Add the login button to the Glassmorphism Login Form

Now I have created a login button in the Glassmorphism Login Form. There is no specific size for this login button.

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



<button>Log In</button>
Enter fullscreen mode Exit fullscreen mode 


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;
}
Enter fullscreen mode Exit fullscreen mode

Add the login button to the Glassmorphism Login Form

Step 7: Create two social buttons

I have created two social media buttons at the end of it all. The two buttons are 150px in length and the background color is semi-transparent.

Here I used the icon which I used the CDN link of font-awesome to activate.



 <div class="social">
   <div class="go"><i class="fab fa-google"></i>  Google</div>
   <div class="fb"><i class="fab fa-facebook"></i>  Facebook</div>
 </div>
Enter fullscreen mode Exit fullscreen mode 


.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  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 .fb{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Create two social buttons
I hope you have learned from this tutorial how I created this Glassmorphism Login Form design with the help of HTML and CSS.

Related Post:

  1. Responsive Footer HTML CSS
  2. International Schools in Bangalore
  3. Simple Stopwatch using JavaScript
  4. javaScript Password Generator
  5. Best International Schools in Hyderabad
  6. Sidebar Menu Using HTML CSS

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Top comments (11)

Collapse
 
hakimio profile image
Tomas Rimkus •

It's unfortunate that backdrop-filter is not supported in Firefox.

Collapse
 
vinzcelavi profile image
Vincent Bianciotto •

You might handle the blur with a pseudo element in absolute and a filter: blur (10px) applied to it !

Collapse
 
durindo profile image
Durindo •

I have it enabled through about:config, I hope they enable it by default soon, but I read that it is only supported by the new rendering engine, hence the delay...

Collapse
 
sangwajesly profile image
Sangwa Jesly •

This is incredible ❤️❣️😍

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

backdrop-filter go BRRRRRRR

Collapse
 
damienpirsy profile image
Matteo Vignoli • • Edited

The glass login is really neat, but might I suggest some rework on your website too? It looks a bit crude and unpolished - not at par with the level of design skills you showed in this tutorial. Unfortunately the website is a bigger window to your work than this piece on Dev.to, so go make something really cool! 😎

Collapse
 
billraymond profile image
Bill Raymond •

I think the website is great and liked the article, which is really why we are here.

Collapse
 
yosracodes profile image
Yosra •

this is so pretty, I love it!

Collapse
 
devpjmb profile image
Pablo Marcano •

Amazing

Collapse
 
shobhit055555 profile image
Shobhit thakur • • Edited

Wow. glassmorphism login
Hey Shantanu...I want to offer you something.
Can I get your contact details and email Id?
Or mail me at joinkhoka@gmail.com
Sincerely,
Shobhit thakur.

Collapse
 
shantanu_jana profile image
Shantanu Jana •

😃😃 foolishdeveloper.com/p/contact-us....

View full discussion (11 comments)

Read next

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -

devopsking profile image

Understanding Content Management Systems (CMS): A Comprehensive Guide

UWABOR KING COLLINS -

leimanisemils profile image

10 Cool Ideas for Discord Bots You Can Build Today

Emīls Oto Leimanis -

inspius profile image

Why Offshore Laravel Development in Vietnam is a Smart Choice for Your Business

Inspius -