What is Glassmorphism, Frosted Glass Effect?
Glassmorphism is a user interface design approach that produces a semi-transparent, frosted glass appearance. This aesthetic is accomplished by utilizing transparency, blurring effects, and subtle shadows, resulting in the illusion of layered glass-like components. The style gained traction following Apple’s macOS Big Sur update and has since been embraced by designers across a multiple of platforms.
You may have encountered the popular Frosted glass effect or Glassmorphism effect utilized in login forms, card, and several components across numerous websites. As an aspiring web developer, have you ever thought about designing your own Login form featuring Frosted glass effects!
In this easy-to-follow blog entry, I will walk you through the process of designing a Glassmorphism Login Form using just HTML and CSS. You will not only discover how to craft forms that feature a beautiful glass-like appearance, but you will also find out how to incorporate an eye-catching floating-label animation.
Instructions for crafting a Glassmorphism Login Form Using HTML & CSS
To design a login form featuring a glassmorphism style and animated floating input labels with HTML and CSS, adhere to these straightforward steps:
- Step 1 : Create a folder. You can give the any name you like, and then create the files listed below into it.
- Step 2 : Set up an index.html file. Ensure the file name is index and the extension must be .html.
- Step 3 : Establish a style.css file. The file name should be style and carry the .css extension.
- Step 4 : Download the image 'image-bg.jpg' and then place it into the project folder.
To begin, incorporate the following HTML code into your index.html file. This code consists of vital HTML components, including forms, inputs, links, buttons, and more. Additionally, I have added the required attribute to the input fields for form validation.
<!DOCTYPE html>
<!-- By Coding Jasim - www.codingjasimweb.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Effect Login Form | Coding Jasim</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<h2>Login</h2>
<div class="input-field">
<input type="text" required>
<label>Email</label>
</div>
<div class="input-field">
<input type="password" required>
<label>Password</label>
</div>
<div class="forget">
<label for="remember">
<input type="checkbox" id="remember">
<p>Remember me</p>
</label>
<a href="#">Forgot password?</a>
</div>
<button type="submit">Log In</button>
<div class="accRegt">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>Next, update your style.css file with the following CSS codes to add the glassmorphism effect and floating label animation to our login form. To get the desired Glassmorphism effect, these lines of code use a variety of CSS properties, such as blur, background, background image, etc.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 0 10px;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("image-bg.jpg"), #000;
background-position: center;
background-size: cover;
}
.wrapper {
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.959);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
form {
display: flex;
flex-direction: column;
}
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #414218;
}
.input-field {
position: relative;
border-bottom: 2px solid #422f2f;
margin: 15px 0;
}
.input-field label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #043718;
font-size: 16px;
pointer-events: none;
transition: 0.15s ease;
}
.input-field input {
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label {
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
.forget {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
color: #fff;
}
#remember {
accent-color: #fff;
}
.forget label {
display: flex;
align-items: center;
}
.forget label p {
margin-left: 8px;
color: #000;
font-weight: 500;
}
.wrapper a {
color: #043718;
text-decoration: none;
font-weight: 500;
}
.wrapper a:hover {
text-decoration: underline;
}
button {
background: #fff;
color: #000;
font-weight: 600;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 3px;
font-size: 16px;
border: 2px solid transparent;
transition: 0.3s ease;
}
button:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.accRegt{
text-align: center;
margin-top: 30px;
color: #043718;
font-weight: 600;
}Final Conclusion
To wrap things up, we have gone through detailed instructions on how to set up your project directory, build the HTML framework, and incorporate the CSS styles for the Glassmorphism effect along with the floating label animation. I am confident that by adhering to the guidelines in this article, you have successfully crafted your very own Glassmorphism Login Form.
Don’t forget to try different things and personalize your login form to make it even more visual appeal. To further advance your HTML and CSS abilities, consider trying to replicate different login form designs featured on this site.
If you face any challenges while working on your Glassmorphism login form, you can easily download source code files for this project at no cost by clicking the download button.