Introduction login Page With Blur Background
Today we will make the Blurred login form, which will be a creative and amazing form with the help of HTML and CSS. This form contains a very nice nature background image with the blurred form div on this login form page. This is a very useful project to take details from the user to do further activity, as you can see this type of form on many websites. By learning about this project, you will know more about the concepts of CSS and HTML.
Let’s start making this login Page With Blur Background without wasting any time with the help of HTML and CSS by doing simple code step by step to make it understandable to every developer. This will not be very complicated; you just need to focus on the CSS part, which is very important to understand.
HTML
First, we will make the structure of the login Page With Blur Background form using HTML. In HTML, first we will add a background image if you want. Now I will start making the form. In the form, first we will give a heading to the login form, then we will make a parent div in which there will be two sub divs, one for username and the other for password. We will also give you two more options. one for forget password; if anyone forgets their password, he or she can login through another option; and another one is for sign up for those who already have an account; there will also be a login button. Last, we set the blur effect on the form div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LayakCoder</title> <link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&display=swap'> <link rel="stylesheet" href="form.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </head> <body> <div class="wrapper"> <div class="login-box"> <div class="login-header"> <span> Login</span> </div> <form action="http://127.0.0.1:5500/project/booklist.html" get="" enctype="multipart/form-data" onsubmit="return login()"> <div class="input-box"> <input type="text" id="user" class="input-field" required> <label for="user" class="label">Username </label> <i class="bx bx-user icon"></i> </div> <div class="input-box"> <input type="password" id="pass" class="input-field" autocomplete="off"> <label for="pass" class="label">Password</label> <i class="bx bx-lock-alt icon" id="show-password"> </i> </div> <div class="remember-forgot"> <div class="remember-me"> <input type="checkbox" id="remember"> <label for="remember">Remember me</label> </div> <div class="forgot"> <a href="#">Forgot password</a> </div> </div> <div class="input-box"> <input type="submit" class="input-submit" value="Login"> </div> <div class="register"> <span>Don't have an account? <a href="#">Register</a></span> </div> </form> </div> </div> <script src="form.js"></script> </body> </html>
CSS
After making the structure of the login Page With Blur Background form, we will now give it style and effect with the use of CSS (an external stylesheet attached to the HTML file). In CSS, first we will set the background image, and then we will give the border to the form area. We will then adjust the size and positions of elements given in the form, like texts, input boxes, links, and buttons, and we will also give the color, font properties, borders, etc. to the text, input box, and button. At the end, we will make it responsive for other devices.
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } :root { --primary-color: #c6c3c3; --second-color: #ffffff; --black-color: #000000; } body { background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c424bbb0-a0e6-4a95-b422-56f707c6e172/dg7c28l-81258807-0f9b-4d7a-9185-738d000d03bc.jpg/v1/fill/w_1024,h_683,q_75,strp/nature_background_image__cartoon_style_by_gabimedia_dg7c28l-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M0MjRiYmIwLWEwZTYtNGE5NS1iNDIyLTU2ZjcwN2M2ZTE3MlwvZGc3YzI4bC04MTI1ODgwNy0wZjliLTRkN2EtOTE4NS03MzhkMDAwZDAzYmMuanBnIiwiaGVpZ2h0IjoiPD02ODMiLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS53YXRlcm1hcmsiXSwid21rIjp7InBhdGgiOiJcL3dtXC9jNDI0YmJiMC1hMGU2LTRhOTUtYjQyMi01NmY3MDdjNmUxNzJcL2dhYmltZWRpYS00LnBuZyIsIm9wYWNpdHkiOjk1LCJwcm9wb3J0aW9ucyI6MC40NSwiZ3Jhdml0eSI6ImNlbnRlciJ9fQ.kf5hpIk-dl_s0smKLMpeG5X0KWNKxELM8VHQRpAKqgk"); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } a { text-decoration: none; color: var(--second-color); } a:hover { text-decoration: underline; } .wrapper { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgba(0, 0, 0, 0.2); } .login-box { position: relative; width: 450px; backdrop-filter: blur(25px); border: 2px solid var(--primary-color); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2); border-radius: 15px; padding: 7.5em 2.5em 4em 2.5em; color: var(--second-color); } .login-header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); width: 140px; height: 70px; border-radius: 0 0 20px 20px; } .login-header span { font-size: 30px; color: var(--black-color); } .login-header::before { content: ""; position: absolute; top: 0; left: -30px; width: 30px; height: 30px; border-top-right-radius: 50%; background: transparent; box-shadow: 15px 0 0 0 var(--primary-color); } .login-header::after { content: ""; position: absolute; top: 0; right: -30px; width: 30px; height: 30px; border-top-left-radius: 50%; background: transparent; box-shadow: -15px 0 0 0 var(--primary-color); } .input-box { position: relative; display: flex; flex-direction: column; margin: 20px 0; } .input-field { width: 100%; height: 55px; font-size: 16px; background: transparent; color: var(--second-color); padding-inline: 20px 50px; border: 2px solid var(--primary-color); border-radius: 30px; outline: none; } #user { margin-bottom: 10px; } .label { position: absolute; top: -28px; left: 20px; transition: 0.2s; } .input-field:focus~.label, .input-field:valid .label { position: absolute; top: -10px; left: 20px; font-size: 14px; background-color: var(--primary-color); border-radius: 30px; color: var(--black-color); padding: 0 10px; } .icon { position: absolute; top: 18px; right: 25px; font-size: 20px; } .remember-forgot { display: flex; justify-content: space-between; font-size: 15px; } .input-submit { width: 100%; height: 50px; background: #c6c3c3; font-size: 16px; font-weight: 500; border: none; border-radius: 30px; cursor: pointer; transition: 0.3s; } .input-submit:hover { background: var(--second-color); } .register { text-align: center; } .register a { font-weight: 500; } @media only screen and (max-width: 564px) { .wrapper { padding: 20px; } .login_box { padding: 7.5em 1.5em 4em 1.5em; } } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .icon.blinking { animation: blink 1s infinite; } /* -- YouTube Link Styles -- */ #source-link { top: 60px; } #source-link>i { color: rgb(94, 106, 210); } #yt-link { top: 10px; } #yt-link>i { color: rgb(219, 31, 106); } .meta-link { align-items: center; backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-flex; gap: 5px; left: 10px; padding: 10px 20px; position: fixed; text-decoration: none; transition: background-color 600ms, border-color 600ms; z-index: 10000; } .meta-link:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .meta-link>i, .meta-link>span { height: 20px; line-height: 20px; } .meta-link>span { color: black; font-family: "Rubik", sans-serif; transition: color 600ms; }
Output of login Page With Blur Background
Finally, we made the transparent modern login Page With Blur Background form using HTML and CSS by following simple steps. I hope you understand the code written above. If you want the source code, then click on the below button.
For more explanation, click on the link to watch the video.
Press the download button to download the source code
3 KB
2 Responses
Hello to all, it’s really a pleasant for me to go to see this website, itt consists of helpfuul Information.
I am really loving the theme/design of your
website. Do you ever run into anny web browser compatibility issues?
A couple of my blog readerss have complained about my website not working ccorrectly in Explorer
butt looks great in Chrome. Do you have any advice
tto help fix this issue?