This glassmorphism login UI template uses modern CSS effects to create a frosted-glass appearance, ideal for premium SaaS and landing pages.
HTML
<form class="login glass">
<h2>Sign In</h2>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Login</button>
</form>CSS
.login.glass{
width:320px;
padding:32px;
backdrop-filter:blur(14px);
background:rgba(255,255,255,.25);
border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,.2);
}
.login input{
width:100%;
padding:12px;
margin:10px 0;
border-radius:10px;
border:none;
}
.login button{
width:100%;
padding:12px;
background:#2563eb;
color:#fff;
border:none;
border-radius:10px;
}Notes
- Premium glass UI
- Trend-based design
- SaaS-ready
- Modern CSS usage
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.