Admin Login Pages · Advanced

Frost — Glassmorphism Login

A glassmorphism sign-in card with backdrop blur, glowing color orbs, frosted inputs and Google / GitHub / Apple sign-in buttons over a vivid gradient background.

Uses Bootstrap 5, Bootstrap Icons. Bootstrap 5 plus the CDN tags below. The downloaded file already includes everything.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Full preview Download

<div class="fr-orb" style="width:380px;height:380px;background:#22d3ee;top:-100px;left:-80px"></div>
<div class="fr-orb" style="width:420px;height:420px;background:#f472b6;bottom:-140px;right:-100px"></div>
<div class="fr-card p-4 p-md-5 text-center">
  <div class="fr-ico mx-auto mb-3"><i class="bi bi-snow"></i></div>
  <h3 class="fw-bold mb-1">Atlas Cloud</h3>
  <p class="mb-4" style="color:rgba(255,255,255,.8)">Sign in to your ConvertAtlas workspace</p>
  <input type="email" class="form-control mb-3" placeholder="Email address">
  <input type="password" class="form-control mb-3" placeholder="Password">
  <button class="btn btn-frost w-100 mb-3">Sign in</button>
  <div class="d-flex align-items-center gap-2 mb-3"><hr class="flex-fill" style="border-color:rgba(255,255,255,.4)"><span class="small" style="color:rgba(255,255,255,.8)">or</span><hr class="flex-fill" style="border-color:rgba(255,255,255,.4)"></div>
  <div class="d-flex gap-2">
    <button class="btn w-100" style="background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px"><i class="bi bi-google"></i></button>
    <button class="btn w-100" style="background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px"><i class="bi bi-github"></i></button>
    <button class="btn w-100" style="background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px"><i class="bi bi-apple"></i></button>
  </div>
  <p class="small mt-4 mb-0" style="color:rgba(255,255,255,.75)">Protected by 2-factor authentication</p>
</div>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

body{min-height:100vh;margin:0;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#0ea5e9,#8b5cf6,#ec4899);position:relative;overflow:hidden;padding:20px}
.fr-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.fr-card{background:rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.35);border-radius:24px;max-width:400px;width:100%;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.fr-card .form-control{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:12px;padding:.7rem .9rem}
.fr-card .form-control::placeholder{color:rgba(255,255,255,.65)}
.fr-card .form-control:focus{background:rgba(255,255,255,.25);box-shadow:0 0 0 .2rem rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-frost{background:#fff;color:#6d28d9;border:0;border-radius:12px;font-weight:700;padding:.7rem}
.btn-frost:hover{background:#f1f5f9;color:#6d28d9}
.fr-ico{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:28px;border:1px solid rgba(255,255,255,.4)}

Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. It uses Bootstrap 5, Bootstrap Icons via CDN (linked above). Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Frost — Glassmorphism Login is a complete admin login pages design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:

Backdrop-blur frosted glass card
Blurred floating color orbs
Frosted translucent inputs
Google, GitHub and Apple buttons
2FA protection notice
Pure CSS — no images needed

How to use it

Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single frost-glass-login.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.