**Introduction:**
In the ever-evolving world of web design, new trends and styles emerge to captivate users and enhance user experience. One such trend that has gained popularity is "Glassmorphism," a visual design style that creates the illusion of semi-transparent, frosted glass elements. In this tutorial, we will walk through the steps to create an elegant Glassmorphism login form using HTML and CSS.
**Prerequisites:**
Basic knowledge of HTML and CSS is required for this tutorial. Let's get started!
**Step 1: Setting Up the HTML Structure**
We'll begin by creating the basic HTML structure for our login form. Open your favorite text editor and create a new HTML file. Copy and paste the following code:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="glass-container">
<div class="login-form">
<h1>Login</h1>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>**Step 2: Applying CSS Styling**
Next, let's create the `styles.css` file and add the necessary CSS to achieve the Glassmorphism effect.
cssbody {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #e96443, #904e95);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.glass-container {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 30px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}
.login-form {
max-width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #fff;
}
form {
display: flex;
flex-direction: column;
}
label {
color: #fff;
margin-top: 10px;
}
input {
padding: 10px;
margin: 5px 0;
border: none;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px;
margin-top: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #45a049;
}**Step 3: Understanding the Code**
In this CSS code, we start by styling the `body` with a gradient background. The `.glass-container` class creates the frosted glass effect using `rgba()` for a semi-transparent white background and `backdrop-filter` property for the blur. The `box-shadow` adds a subtle shadow effect.
The `.login-form` class sets the maximum width and centers the form. The `h1` tag is centered and given a white color. The form elements are styled with a padding, margin, and border radius for a clean look. The submit button has a green background color and changes on hover.
**Step 4: Testing the Glassmorphism Login Form**
Save the HTML and CSS files in the same folder and open the HTML file in your browser. You should now see a stylish Glassmorphism login form with a frosted glass effect.
**Conclusion:**
In this tutorial, we've explored the fascinating world of Glassmorphism in web design. By combining HTML and CSS, we've created a sleek and modern Glassmorphism login form that's sure to impress your users. Experiment with different color schemes and elements to customize the form to fit your project's needs. Happy coding!
