Transparent Login Form with Blur Background

Hello Friends, and welcome to the blog. Here I am sharing a snippet based on how to create a Transparent Login Form with Blur Background. The login form is something that we use to authenticate the visitor or user. In most cases, this form contains two fields for asking credentials. one is for asking for the username and the other for the user's password. The users who usually signed up for any website of apps have to go through this process to enter their accounts.

In this blog, I have shared a simple-looking login form. No backend programming like PHP and all included in this program. This program is just for beginners who want to design a login form UI using HTML and CSS.

I guess you already know how this login form will look like seeing the image above. This project is a simple-looking transparent login form with a blue background image behind it. Besides, an avatar image is in the top and middle of the login form. Also, there are two fields, namely email and password, for user credential input. And finally, a submit button along with a remember me checkbox. I would suggest you follow the below tutorial from start to finish to have a clear idea about what I am saying here.

I am assuming you have watched the whole video and have a basic concept about the coding used here. Now let's start with the HTML markup. At first, I have taken a div named 'contact-form,' and inside that, I have taken an image called 'avatar.' after taking an h2 tag, I have taken a form that includes input elements like email, password, submit, and checkbox. That is all for HTML markup.

You may also like:

I am moving on to CSS coding. First, we will eliminate the default margin padding by setting them to 0. I have used Poppins as the main font for the program, and you can use any free google fonts while you will modify this snippet. After that, I have provided a background image to the pseudo-element and a CSS filter blur of 10px. Then position the 'contact-form' div in the middle using absolute value. I have given the form a transparent black background color using rgba color format. i have given the form a width and height of 400px and 350px respectively. after that, I position the avatar image to the top and middle of the form using the absolute position value. the rest of the CSS styling is for the input elements that I have used for the projects. Without further explanation, I am providing the code below.

Transparent Login Form with Blur Background (Source Code) :

To create this snippet, create one HTML and CSS file and copy and paste the code below in the appropriate file.



I hope you liked this simple snippet. Please follow my social media profiles and subscribe to the 'divinector' youtube channel for more snippets like this. Thank you for stopping by.


Please Do not Enter any spam link in the comment box

  1. This is supper cool, could you please create a registration form?

  2. thanks alot brother you a real help


Post a Comment

Please Do not Enter any spam link in the comment box