Glassmorphism Login UI

A glassmorphism login UI built with pure HTML and CSS that uses translucent backgrounds and blur effects to create a frosted glass appearance. It enhances modern visual layering and depth aesthetics within a responsive authentication layout.

Usage

Use this component when interfaces require contemporary glass style authentication design, such as SaaS platforms, creative portfolios, startup landing pages, or branded login experiences.

Implementation

The glass effect is achieved using semi transparent backgrounds and backdrop filter blur styling, combined with structured input alignment. CSS manages spacing, focus states, and responsive stacking across screen sizes.

HTML

<form class="login glass">
  <h2>Sign In</h2>
  <input type="email" placeholder="Email">
  <input type="password" placeholder="Password">
  <button>Login</button>
</form>

<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;
}

.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

• Built with pure HTML and CSS
• No JavaScript required
• Uses translucent glass style background
• Enhances modern depth based aesthetics
• Fully responsive across breakpoints
• Suitable for SaaS and creative interfaces
• Easy to customize blur intensity and accent colors

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.