A glass accent login form built with pure HTML and CSS that combines translucent surfaces with vibrant accent highlights. It enhances modern glass style aesthetics and visual depth layering in authentication layouts.
Usage
Use this component when interfaces require glass inspired authentication design, such as modern SaaS dashboards, startup landing pages, creative portfolios, or branded login experiences.
Implementation
The effect is implemented using semi transparent backgrounds with backdrop filter blur and accent color highlights, combined with structured input alignment. Responsive styling ensures consistent readability across screen sizes.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glass Accent Login</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Ambient background orbs -->
<div class="bg">
<div class="bg__orb bg__orb--1"></div>
<div class="bg__orb bg__orb--2"></div>
<div class="bg__orb bg__orb--3"></div>
</div>
<main class="scene">
<div class="card">
<!-- Top shimmer line -->
<div class="card__shimmer"></div>
<!-- Header -->
<header class="card__header">
<div class="card__icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
<circle cx="12" cy="9" r="2.5"/>
</svg>
</div>
<h1 class="card__title">Welcome back</h1>
<p class="card__sub">Sign in to continue your journey</p>
</header>
<!-- Divider -->
<div class="card__divider"></div>
<!-- Form -->
<form class="form" onsubmit="return false;">
<div class="form__field">
<label class="form__label" for="email">Email address</label>
<div class="form__input-wrap">
<svg class="form__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="m2 7 10 7 10-7"/>
</svg>
<input class="form__input" id="email" type="email" placeholder="you@example.com" autocomplete="off" />
</div>
</div>
<div class="form__field">
<label class="form__label" for="password">
Password
<a href="#" class="form__forgot">Forgot?</a>
</label>
<div class="form__input-wrap">
<svg class="form__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
<input class="form__input" id="password" type="password" placeholder="••••••••" />
</div>
</div>
<button class="btn-primary" type="submit">
<span>Sign in</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</form>
<!-- Separator -->
<div class="separator">
<span class="separator__line"></span>
<span class="separator__text">or continue with</span>
<span class="separator__line"></span>
</div>
<!-- Social buttons -->
<div class="socials">
<button class="socials__btn socials__btn--google">
<img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" />
<span>Google</span>
</button>
<button class="socials__btn socials__btn--facebook">
<img src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook" />
<span>Facebook</span>
</button>
</div>
<!-- Footer -->
<p class="card__footer">
No account? <a href="#">Create one</a>
</p>
</div>
</main>
</body>
</html>CSS
/* ─────────────────────────────────────────
Glass Accent Login — style.css
Aesthetic: Liquid glass · refined dark
Fonts: Cormorant Garamond + DM Sans
───────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--glass-bg: rgba(18, 18, 22, 0.72);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shine: rgba(255, 255, 255, 0.06);
--surface: rgba(30, 30, 36, 0.80);
--surface-hover: rgba(38, 38, 46, 0.95);
--text-primary: #f0eff4;
--text-secondary: #8b8a97;
--text-muted: #5a5967;
--accent-blue: #60a5fa;
--accent-teal: #2dd4bf;
--accent-rose: #fb7185;
--radius-card: 24px;
--radius-input: 13px;
--radius-btn: 999px;
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Body & scene ─────────────────────── */
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0b0b0f;
font-family: 'DM Sans', sans-serif;
overflow: hidden;
}
/* ── Ambient background orbs ──────────── */
.bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.bg__orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
animation: drift 12s ease-in-out infinite alternate;
}
.bg__orb--1 {
width: 380px;
height: 380px;
top: -100px;
left: -80px;
background: radial-gradient(circle, #1e40af 0%, transparent 70%);
animation-delay: 0s;
}
.bg__orb--2 {
width: 300px;
height: 300px;
bottom: -60px;
right: -60px;
background: radial-gradient(circle, #0f766e 0%, transparent 70%);
animation-delay: -4s;
}
.bg__orb--3 {
width: 220px;
height: 220px;
top: 50%;
left: 60%;
background: radial-gradient(circle, #9f1239 0%, transparent 70%);
animation-delay: -8s;
opacity: 0.30;
}
@keyframes drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(30px, 20px) scale(1.06); }
}
/* ── Scene wrapper ────────────────────── */
.scene {
position: relative;
z-index: 1;
padding: 1rem;
}
/* ── Card ─────────────────────────────── */
.card {
width: 320px;
padding: 1.6rem 1.5rem 1.3rem;
border-radius: var(--radius-card);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
box-shadow:
0 0 0 0.5px rgba(255,255,255,0.04) inset,
0 32px 64px rgba(0, 0, 0, 0.55),
0 8px 24px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
overflow: hidden;
animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Top shimmer streak */
.card__shimmer {
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.22) 40%,
rgba(96,165,250,0.35) 60%,
transparent
);
}
/* ── Card header ──────────────────────── */
.card__header {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
animation: fadeUp 0.5s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.card__icon {
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(96, 165, 250, 0.1);
border: 1px solid rgba(96, 165, 250, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-blue);
margin-bottom: 0.2rem;
}
.card__title {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.3px;
line-height: 1.2;
}
.card__sub {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.2px;
}
/* ── Divider ──────────────────────────── */
.card__divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
margin: -0.2rem 0;
}
/* ── Form ─────────────────────────────── */
.form {
display: flex;
flex-direction: column;
gap: 0.7rem;
animation: fadeUp 0.5s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.form__field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form__label {
font-size: 10.5px;
color: var(--text-secondary);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.form__forgot {
color: var(--accent-blue);
text-decoration: none;
opacity: 0.75;
transition: opacity var(--transition);
}
.form__forgot:hover {
opacity: 1;
}
.form__input-wrap {
position: relative;
}
.form__icon {
position: absolute;
left: 0.65rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
transition: color var(--transition);
}
.form__input {
width: 100%;
padding: 0.52rem 0.65rem 0.52rem 2rem;
border-radius: var(--radius-input);
border: 1px solid rgba(255,255,255,0.06);
background: var(--surface);
color: var(--text-primary);
font-family: 'DM Sans', sans-serif;
font-size: 12px;
outline: none;
transition:
border-color var(--transition),
background var(--transition),
box-shadow var(--transition);
}
.form__input::placeholder {
color: var(--text-muted);
}
.form__input:focus {
border-color: rgba(96, 165, 250, 0.4);
background: var(--surface-hover);
box-shadow:
0 0 0 3px rgba(96, 165, 250, 0.08),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.form__input:focus + .form__icon,
.form__input-wrap:focus-within .form__icon {
color: var(--accent-blue);
}
/* ── Primary button ───────────────────── */
.btn-primary {
margin-top: 0.3rem;
padding: 0.58rem 1rem;
border-radius: var(--radius-btn);
border: none;
background: linear-gradient(160deg, #e8e8f0 0%, #c8c8d4 100%);
color: #111018;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
box-shadow:
0 8px 24px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.7);
transition:
transform var(--transition),
box-shadow var(--transition),
background var(--transition);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.7);
background: linear-gradient(160deg, #f0f0f8 0%, #d4d4e0 100%);
}
.btn-primary:active {
transform: translateY(0);
box-shadow:
0 4px 12px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary svg {
transition: transform var(--transition);
}
.btn-primary:hover svg {
transform: translateX(3px);
}
/* ── Separator ────────────────────────── */
.separator {
display: flex;
align-items: center;
gap: 0.6rem;
animation: fadeUp 0.5s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.separator__line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-border));
}
.separator__line:last-child {
background: linear-gradient(270deg, transparent, var(--glass-border));
}
.separator__text {
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.4px;
white-space: nowrap;
}
/* ── Social buttons ───────────────────── */
.socials {
display: flex;
gap: 0.5rem;
animation: fadeUp 0.5s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
.socials__btn {
flex: 1;
padding: 0.48rem 0.5rem;
border-radius: var(--radius-input);
font-family: 'DM Sans', sans-serif;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition:
background var(--transition),
border-color var(--transition),
transform var(--transition);
}
.socials__btn:hover {
transform: translateY(-1px);
}
.socials__btn img {
width: 14px;
height: 14px;
object-fit: contain;
}
.socials__btn--google {
background: rgba(50, 50, 58, 0.8);
color: #d1d0da;
border: 1px solid rgba(255,255,255,0.07);
}
.socials__btn--google:hover {
background: rgba(60, 60, 70, 0.95);
border-color: rgba(255,255,255,0.12);
}
.socials__btn--facebook {
background: transparent;
color: var(--text-muted);
border: 1px solid rgba(255,255,255,0.08);
}
.socials__btn--facebook:hover {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.14);
color: var(--text-secondary);
}
.socials__btn--facebook img {
opacity: 0.65;
}
/* ── Footer ───────────────────────────── */
.card__footer {
text-align: center;
font-size: 10.5px;
color: var(--text-muted);
animation: fadeUp 0.5s 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.card__footer a {
color: var(--accent-blue);
text-decoration: none;
opacity: 0.8;
transition: opacity var(--transition);
}
.card__footer a:hover {
opacity: 1;
}
/* ── Shared fade-up keyframe ──────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses translucent glass style UI surfaces
- Enhances visual layering and depth clarity
- Fully responsive across breakpoints
- Suitable for modern login interfaces
- Easy to customize accent color and blur intensity
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.