Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create A Glassmorphism Login Form in HTML and CSS
This article will show you how to design a glassmorphism Login Form using HTML and CSS. Glassmorphism is a popular UI design trend based on frosted glass effects, which make elements look translucent with a blurred background.
In this article, we will create a Glassmorphism login form using HTML and CSS.
What is Glassmorphism?
Glassmorphism is a UI design style that gives an element a frosted-glass effect.
- Blurred Background: Creates a glassy, frosted effect.
- Transparency: Allows part of the background to show through.
- Light Broders and shadows: Adds depth and define the shape.
In this article, we will understand how to Create A Glassmorphism Login Form in HTML and CSS.
Creating Glassmorphism Login Form in HTML and CSS
We'll be following three steps.
Creating the HTML Structure
We have start by building the structure of the login form. We have used a single container that holds the username and password input fields along with a submit button.
<!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">
<h2>Login</h2>
<form>
<input type="text" class="input-field" placeholder="Username" required>
<input type="password" class="input-field" placeholder="Password" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
</body>
</html>
Explanation
- The container holds the form and centers it on the page.
- The glass-form gives the form a specific class to apply the glassmorphism styling.
- Inside the form, we have a heading (h2), two input fields (for username and password), and a submit button.
Designing the Form with CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Background Animation */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff8a00, #da1b60);
overflow: hidden;
}
/* Background Gradient Animation */
body::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: linear-gradient(135deg, #ff8a00, #da1b60, #fcb045, #e91e63);
background-size: 400% 400%;
z-index: -2;
animation: gradient-animation 8s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Glass Effect Container */
.glass-container {
position: relative;
width: 350px;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Heading Styling */
.glass-container h2 {
text-align: center;
color: #fff;
margin-bottom: 20px;
font-size: 1.8em;
}
/* Input Styling */
.input-field {
width: 100%;
padding: 12px 10px;
margin: 15px 0;
border: none;
outline: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 1em;
border-radius: 5px;
transition: 0.4s ease;
}
/* Focused Input Field Effect */
.input-field:focus {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.02);
}
/* Button Styling */
.btn {
width: 100%;
padding: 12px;
margin-top: 20px;
background: linear-gradient(135deg, #ff8a00, #da1b60);
border: none;
border-radius: 5px;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: all 0.4s ease;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
/* Glowing Button Hover */
.btn:hover {
background: linear-gradient(135deg, #e91e63, #ff8a00);
box-shadow: 0 0 15px rgba(255, 138, 0, 0.6), 0 0 15px rgba(234, 30, 99, 0.6);
transform: scale(1.05);
}
/* Placeholder Styling */
::placeholder {
color: rgba(255, 255, 255, 0.7);
opacity: 0.9;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Background Animation */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff8a00, #da1b60);
overflow: hidden;
}
/* Background Gradient Animation */
body::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: linear-gradient(135deg, #ff8a00, #da1b60, #fcb045, #e91e63);
background-size: 400% 400%;
z-index: -2;
animation: gradient-animation 8s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Glass Effect Container */
.glass-container {
position: relative;
width: 350px;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Heading Styling */
.glass-container h2 {
text-align: center;
color: #fff;
margin-bottom: 20px;
font-size: 1.8em;
}
/* Input Styling */
.input-field {
width: 100%;
padding: 12px 10px;
margin: 15px 0;
border: none;
outline: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 1em;
border-radius: 5px;
transition: 0.4s ease;
}
/* Focused Input Field Effect */
.input-field:focus {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.02);
}
/* Button Styling */
.btn {
width: 100%;
padding: 12px;
margin-top: 20px;
background: linear-gradient(135deg, #ff8a00, #da1b60);
border: none;
border-radius: 5px;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: all 0.4s ease;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
/* Glowing Button Hover */
.btn:hover {
background: linear-gradient(135deg, #e91e63, #ff8a00);
box-shadow: 0 0 15px rgba(255, 138, 0, 0.6), 0 0 15px rgba(234, 30, 99, 0.6);
transform: scale(1.05);
}
/* Placeholder Styling */
::placeholder {
color: rgba(255, 255, 255, 0.7);
opacity: 0.9;
}
Explanation
Here we only explained key CSS properties.
- Background Animation: The ::before pseudo-element creates a smooth gradient animation behind the glass container, adding dynamic visual interest.
- Backdrop Filter: The backdrop-filter: blur(15px) property applies the frosted glass blur effect to the container.
- Transparency (RGBA): We used rgba(255, 255, 255, 0.1) for the background color, which combines openness with white for a glassy, semi-transparent look.
- Input Field Focus Effect: When a user clicks an input field, a light scaling and shadow effect enhances interactivity, with transform: scale(1.02) and box-shadow.
- Button Hover Glow: The login button uses gradient and shadow effects on hover, creating a soft glow that draws attention.
Complete Code (HTML & CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio and Login Page</title>
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Background Animation */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff8a00, #da1b60);
overflow: hidden;
flex-direction: column;
}
/* Background Gradient Animation */
body::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: linear-gradient(135deg, #ff8a00, #da1b60, #fcb045, #e91e63);
background-size: 400% 400%;
z-index: -2;
animation: gradient-animation 8s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Glass Effect Container */
.glass-container {
position: relative;
width: 350px;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 20px;
}
/* Heading Styling */
.glass-container h2 {
text-align: center;
color: #fff;
margin-bottom: 20px;
font-size: 1.8em;
}
/* Input Styling */
.input-field {
width: 100%;
padding: 12px 10px;
margin: 15px 0;
border: none;
outline: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 1em;
border-radius: 5px;
transition: 0.4s ease;
}
/* Focused Input Field Effect */
.input-field:focus {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.02);
}
/* Button Styling */
.btn {
width: 100%;
padding: 12px;
margin-top: 20px;
background: linear-gradient(135deg, #ff8a00, #da1b60);
border: none;
border-radius: 5px;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: all 0.4s ease;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
/* Glowing Button Hover */
.btn:hover {
background: linear-gradient(135deg, #e91e63, #ff8a00);
box-shadow: 0 0 15px rgba(255, 138, 0, 0.6), 0 0 15px rgba(234, 30, 99, 0.6);
transform: scale(1.05);
}
/* Placeholder Styling */
::placeholder {
color: rgba(255, 255, 255, 0.7);
opacity: 0.9;
}
/* Portfolio Header */
.header {
width: 100%;
background-color: lightblue;
padding: 20px;
}
nav {
display: flex;
margin: auto;
width: 90%;
padding: 20px;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
list-style: none;
margin: 10px;
}
a {
text-decoration: none;
color: black;
font-weight: bolder;
padding: 5px;
}
a:hover {
background-color: seagreen;
border-radius: 2px;
color: white;
}
.button-cv,
.button-gfc {
display: inline-block;
margin-left: 0%;
border-radius: 5px;
transition: background-color 0.5s;
background: black;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: none;
cursor: pointer;
}
.button-cv:hover {
background-color: white;
color: black;
}
.button-gfc {
background: lightsalmon;
}
.button-gfc:hover {
background-color: white;
color: black;
}
.body {
margin: 20px 100px;
}
h1 {
font-size: 30px;
color: black;
margin-bottom: 20px;
}
.demo1 {
color: orange;
margin-bottom: 30px;
}
.demo2 {
line-height: 20px;
}
.button-lrn,
.button-hire {
background: lightsalmon;
padding: 10px 12px;
text-decoration: none;
font-weight: bold;
color: whitesmoke;
display: inline-block;
margin: 30px 8px;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
letter-spacing: 1px;
cursor: pointer;
}
.button-lrn:hover {
background-color: whitesmoke;
color: black;
}
.button-hire {
background: black;
}
.button-hire:hover {
background-color: seagreen;
}
.green {
color: seagreen;
}
</style>
</head>
<body>
<!-- Login Form Section -->
<div class="glass-container">
<h2>Login</h2>
<input class="input-field" type="text" placeholder="Username" required>
<input class="input-field" type="password" placeholder="Password" required>
<button class="btn">Login</button>
</div>
</body>
</html>
Output
In this article, we learned and understood how to design a Glassmorphism Login Form using HTML and CSS. We have designed a basic Glassmorphism Login Form that has a consistent background. The form has a frosted glass look that makes it visually stand out.
Updated on: 2024-11-06T09:26:42+05:30
273 Views
Advertisements