Modern Frosted Glass UI Design for Beginners
A Glassmorphism Login Form is a modern UI design trend that creates a beautiful frosted glass effect using transparency, blur, and soft shadows. In this tutorial, you will learn how to create a Glassmorphism Login Form using only HTML and CSS, without using JavaScript.
This design style is widely used in modern websites, dashboards, and portfolio projects to create a clean and premium look.
Tools & Resources That Support My Web Development Work
Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.
1. Video Tutorial – Glassmorphism Login Form
If you prefer visual learning, you can follow the complete video tutorial where the Glassmorphism Login Form is created step by step.
In the tutorial, you will learn:
HTML form structure
Creating glass effect using CSS
Applying blur and transparency
Adding smooth hover and focus effects
2. HTML Structure – Login Form Layout
The HTML structure includes:
Form container
Username input field
Password input field
Login button
The layout is kept clean and simple to focus mainly on the glass effect styling.
👇 Place your complete HTML code below this section.
<!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 | CodeByGaurav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="leaves">
<div class="set">
<div><img decoding="async" src="./images/leaf_01.png" alt="leaf 01 CodeByGaurav" title="leaf 01 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_02.png" alt="leaf 02 CodeByGaurav" title="leaf 02 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_03.png" alt="leaf 03 CodeByGaurav" title="leaf 03 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_04.png" alt="leaf 04 CodeByGaurav" title="leaf 04 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_01.png" alt="leaf 01 CodeByGaurav" title="leaf 01 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_02.png" alt="leaf 02 CodeByGaurav" title="leaf 02 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_03.png" alt="leaf 03 CodeByGaurav" title="leaf 03 Glassmorphism Login Form Using HTML & CSS"></div>
<div><img decoding="async" src="./images/leaf_04.png" alt="leaf 04 CodeByGaurav" title="leaf 04 Glassmorphism Login Form Using HTML & CSS"></div>
</div>
</div>
<img decoding="async" src="./images/bg.jpg" class="bg" alt="bg CodeByGaurav" title="bg Glassmorphism Login Form Using HTML & CSS">
<img decoding="async" src="./images/girl.png" class="girl" alt="girl CodeByGaurav" title="girl Glassmorphism Login Form Using HTML & CSS">
<img decoding="async" src="./images/trees.png" class="trees" alt="trees CodeByGaurav" title="trees Glassmorphism Login Form Using HTML & CSS">
<div class="login">
<h2>Sign In</h2>
<div class="inputBox">
<input type="text" placeholder="Username">
</div>
<div class="inputBox">
<input type="password" placeholder="Password">
</div>
<div class="inputBox">
<input type="submit" value="Login" id="btn">
</div>
<div class="group">
<a href="#">Forgot Password</a>
<a href="#">Signup</a>
</div>
</div>
</section>
</body>
</html>
3. CSS Styling – Creating the Glass Effect
CSS is the main part of this project. It is used to:
Apply transparent background using
rgba()Add
backdrop-filter: blur()for frosted effectCreate rounded corners with
border-radiusAdd subtle box-shadow
Apply hover and focus animations
Using a gradient or image background enhances the glass effect even more.
👇 Add your complete CSS code below this section.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
section .bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section .trees{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 100;
pointer-events: none;
}
section .girl{
position: absolute;
scale: 0.65;
pointer-events: none;
animation: animateGirl 10s linear infinite;
}
@keyframes animateGirl {
0%{
transform: translateX(calc(100% + 100vw));
}
50%{
transform: translateX(calc(-100% - 100vw));
}
50.01%{
transform: translateX(calc(-100% - 100vw)) rotateY(180deg);
}
100%{
transform: translateX(calc(100% + 100vw)) rotateY(180deg);
}
}
.login{
position: relative;
padding: 60px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
border: 1px solid #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5)
;
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
display: flex;
flex-direction: column;
gap: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}
.login h2{
position: relative;
width: 100%;
text-align: center;
font-size: 2.5rem;
font-weight: 600;
color: #8f2c24;
margin-bottom: 10px;
}
.login .inputBox{
position: relative;
}
.login .inputBox input{
position: relative;
width: 100%;
padding: 15px 20px;
outline: none;
font-size: 1.25rem;
color: #8f2c24;
border-radius: 5px;
background: #fff;
border: none;
margin-bottom: 30px;
}
.login .inputBox ::placeholder{
color: #8f2c24;
}
.login .inputBox #btn{
position: relative;
border: none;
outline: none;
background: #8f2c24;
color: #fff;
cursor: pointer;
font-size: 1.25rem;
font-weight: 500;
transition: 0.5s;
}
.login .inputBox #btn:hover{
background: #d64c42;
}
.login .group{
display: flex;
justify-content: space-between;
}
.login .group a{
font-size: 1.25rem;
color: #8f2c24;
font-weight: 500;
text-decoration: none;
}
.login .group a:nth-child(2){
text-decoration: underline;
}
.leaves{
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
pointer-events: none;
}
.leaves .set{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.leaves .set div{
position: absolute;
display: block;
}
.leaves .set div:nth-child(1){
left: 20%;
animation: animate 20s linear infinite;
}
.leaves .set div:nth-child(2){
left: 50%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(3){
left: 70%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(4){
left: 5%;
animation: animate 15s linear infinite;
}
.leaves .set div:nth-child(5){
left: 85%;
animation: animate 18s linear infinite;
}
.leaves .set div:nth-child(6){
left: 90%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(7){
left: 15%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(8){
left: 60%;
animation: animate 15s linear infinite;
}
@keyframes animate {
0%{
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
}
10%{
opacity: 1;
}
20%{
transform: translateX(-20px) rotate(45deg);
}
40%{
transform: translateX(-20px) rotate(90deg);
}
60%{
transform: translateX(20px) rotate(180deg);
}
80%{
transform: translateX(-20px) rotate(45deg);
}
100%{
top: 110%;
transform: translateX(20px) rotate(255deg);
}
}
4. Project Images – Download Resources
This project uses a background image to enhance the glassmorphism effect. A high-quality background helps create a better frosted glass appearance.
The image resources include:
Gradient background image
Optional abstract background
Preview screenshot of the final design
You can download the project images from the link provided below.
👇 Download the images from here:
👉 Download Project Images (ZIP File)
👉 Or Get Images from GitHub RepositoryAfter downloading, place the images inside your project folder (for example, inside an
imagesfolder) and link them correctly in your HTML or CSS file.
5. Key Features of This Glassmorphism Login Form
Modern frosted glass UI
Built using only HTML & CSS
Smooth hover and focus effects
Fully responsive layout
Beginner-friendly code
Conclusion
In this tutorial, you learned how to create a Glassmorphism Login Form using HTML and CSS. This modern UI design trend helps make your website look clean, elegant, and professional.
You can enhance this project further by adding:
Floating labels
Dark and light theme toggle
Animated background
Social login buttons
Practicing UI components like this will significantly improve your frontend design skills.
For more modern HTML & CSS UI projects, keep building and experimenting 🚀
Volwassen inhoud streamen op veilige en betrouwbare platforms.
Vind gegarandeerde videobronnen voor een premium ervaring.
my site: BUY XANAX ONLINE
Thank you for your comment. This website focuses only on educational and informative content
It’s amazing in favor of me to have a website, which is useful
in support of my know-how. thanks admin
my page; BUY CANNABIS ONLINE
Thank you so much 😊
I’m really glad the website is helpful for your learning.
Your support and feedback truly mean a lot!
Pingback: Build an Age Calculator Using HTML CSS and JavaScript (Beginner Friendly Project) - CodeByGaurav
Pingback: Responsive Footer Design using HTML & CSS (Beginner Friendly Tutorial) - CodeByGaurav