How To Create Transparent Login Form Using HTML and CSS

INTRO

Hello guys, I am back with another amazing HTML and CSS project. In this blog, I am going to show you how we can make an outstanding login form but in this form, there is a special feature I have added, today we are going to discuss how to make a transparent form by using HTML and CSS step by step. But first, we will discuss, what is actual transparent form looks like.

Transparent Form

A transparent login or registration form is a beautiful form. In this design, the form is completely transparent with the help of OPACITY property and we are using one background image in the login form you see only two fields one is Enter the user name and another one is Enter password after that you see one beautiful button.

Video Tutorial on How to make a transparent login form using HTML & CSS

In the video, you’ve seen the Login form using HTML and CSS and I hope you’ve understood the basic codes behind creating this program. This is a pure HTML, CSS program so when you entered your info and submit the form, it won’t redirect you to any other pages/sites. If you know JavaScript, then you add some advanced features to this form like – validation of the input field, showing or hiding the password toggle button, and many more.

How to Make a Transparent Form by using HTML and CSS step by step

First of all, we will create a simple login form then we will select a beautiful image for the background because over form will be transparent so the more your background image will be attractive, the more your form will look amazing then we will add 2 icons. 1 for the email and 2^nd for the password then we will use the (shadow) property for the login button with this property our form will look more amazing and attractive. Now there are some actions that we must take.

Steps for making a Transparent Form

Find a beautiful image for the background.

Create 2 files 1^stHTML 2^nd style. CSS.
Add a body background image in the form.
Use the Shadow property on the login button.

Make the form transparent.
Put the icons in the email and password.

You can watch this video instruction below for a step-by-step live procedure, to create an attractive transparent form by using HTML and CSS.

Now I’ll give you the whole HTML and CSS source code for the login and registration form with transparent glass effects. If you want to add this form to your website and projects you download this code and use it for any type of project without any limitations.

Source Code – Transparent Login Form

First, create a file with the name index.HTML in your code and use this source code for a wonderful login page just copy this source code and paste it into your files.

HTML FILE Source Code

<!DOCTYPE html>
<!-- Created by Coding Pakistan www.codingpakistan.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent Login Form HTML CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-div">
        <h1> login </h1>
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <button> <b> Login </b> </button>
    </div>
</body>
</html>

Similarly, create a file with the name style.CSS in your coder and use this source code by pasting it into your program

CSS FILE Source Code

/* Created by Coding Pakistan www.codingpakistan.com */
*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
body{
    width: 100%;
    height: 100%;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: cover;
}
.main-div{
    width: 300px;
    height: 500px;
    border: 2px solid rgb(122, 118, 118);
    position: relative;
    margin: 50px auto;
    border-radius: 30px;
}
h1{
    text-align: center;
    margin: 80px;
}
input{
    width: 250px;
    height: 30px;
    margin-top: 30px;
    margin-left: 20px;
    cursor: pointer;
}
button{
    width: 250px;
    height: 40px;
    background-color: rgb(135, 135, 248);
    margin: 30px 20px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

And now your beautiful transparent form design Using HTML and CSS is ready. If your code is broken or you’ve run into any difficulties or issues, please download the source code files from the link provided. You must first extract the.zip file that will be downloaded as part of the free service.

Thank you for your time for more attractive and creative topics, keep visiting my blogging channel www.codingpakisan.com I am sure you will like my content, and if any other topic is on your mind so feel free and share it with me.

If you have any questions about this contact me I will answer as soon as possible

INTRO

Transparent Form

Source Code – Transparent Login Form

Leave a Comment Cancel reply