32 CSS Floating Action Button Designs 09 / 32
Glassmorphism FAB
Glassmorphism floating action button with backdrop-filter blur, tinted color variants, animated background blobs, and pill shape.
The code
<div class="fb09">
<div class="fb09-blob fb09-blob--a"></div>
<div class="fb09-blob fb09-blob--b"></div>
<div class="fb09-blob fb09-blob--c"></div>
<div class="fb09-scene">
<h1>Glassmorphism FAB</h1>
<p class="fb09-sub">Frosted glass floating action buttons — backdrop-filter blur with layered inset highlights, tinted variants and pill forms on a vivid gradient backdrop.</p>
<div class="fb09-grid">
<!-- neutral glass -->
<div class="fb09-card">
<span class="fb09-card-lbl">Clear glass</span>
<button class="fb09-glass-fab fb09-glass-fab--circle" aria-label="Add">
<svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
</div>
<!-- blue tinted -->
<div class="fb09-card">
<span class="fb09-card-lbl">Blue tint</span>
<button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--blue" aria-label="Share">
<svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
</button>
</div>
<!-- rose tinted -->
<div class="fb09-card">
<span class="fb09-card-lbl">Rose tint</span>
<button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--rose" aria-label="Like">
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
</div>
<!-- cyan square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Cyan square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--cyan" aria-label="Camera">
<svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2M12 7a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-1H5.5A2.5 2.5 0 003 8.5V19a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 19V8.5A2.5 2.5 0 0018.5 6zM9 4l.83-1H14.2L15 4H9z"/></svg>
</button>
</div>
<!-- blue square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Blue square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--blue" aria-label="Edit">
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
</div>
<!-- neutral square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Clear square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq" aria-label="Settings">
<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96a7.2 7.2 0 00-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84a.484.484 0 00-.47.41l-.36 2.54a7.2 7.2 0 00-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
</button>
</div>
</div>
<!-- pill row -->
<div class="fb09-pill-row">
<button class="fb09-glass-fab fb09-glass-fab--pill" aria-label="Compose">
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
Compose
</button>
<button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--blue" aria-label="New project">
<svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
New project
</button>
<button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--rose" aria-label="Save">
<svg viewBox="0 0 24 24"><path d="M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7l-4-4zm-5 16a3 3 0 110-6 3 3 0 010 6zm3-10H5V5h10v4z"/></svg>
Save
</button>
</div>
</div>
</div> <div class="fb09">
<div class="fb09-blob fb09-blob--a"></div>
<div class="fb09-blob fb09-blob--b"></div>
<div class="fb09-blob fb09-blob--c"></div>
<div class="fb09-scene">
<h1>Glassmorphism FAB</h1>
<p class="fb09-sub">Frosted glass floating action buttons — backdrop-filter blur with layered inset highlights, tinted variants and pill forms on a vivid gradient backdrop.</p>
<div class="fb09-grid">
<!-- neutral glass -->
<div class="fb09-card">
<span class="fb09-card-lbl">Clear glass</span>
<button class="fb09-glass-fab fb09-glass-fab--circle" aria-label="Add">
<svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
</div>
<!-- blue tinted -->
<div class="fb09-card">
<span class="fb09-card-lbl">Blue tint</span>
<button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--blue" aria-label="Share">
<svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
</button>
</div>
<!-- rose tinted -->
<div class="fb09-card">
<span class="fb09-card-lbl">Rose tint</span>
<button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--rose" aria-label="Like">
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
</div>
<!-- cyan square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Cyan square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--cyan" aria-label="Camera">
<svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2M12 7a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-1H5.5A2.5 2.5 0 003 8.5V19a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 19V8.5A2.5 2.5 0 0018.5 6zM9 4l.83-1H14.2L15 4H9z"/></svg>
</button>
</div>
<!-- blue square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Blue square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--blue" aria-label="Edit">
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
</div>
<!-- neutral square -->
<div class="fb09-card">
<span class="fb09-card-lbl">Clear square</span>
<button class="fb09-glass-fab fb09-glass-fab--sq" aria-label="Settings">
<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96a7.2 7.2 0 00-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84a.484.484 0 00-.47.41l-.36 2.54a7.2 7.2 0 00-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
</button>
</div>
</div>
<!-- pill row -->
<div class="fb09-pill-row">
<button class="fb09-glass-fab fb09-glass-fab--pill" aria-label="Compose">
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
Compose
</button>
<button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--blue" aria-label="New project">
<svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
New project
</button>
<button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--rose" aria-label="Save">
<svg viewBox="0 0 24 24"><path d="M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7l-4-4zm-5 16a3 3 0 110-6 3 3 0 010 6zm3-10H5V5h10v4z"/></svg>
Save
</button>
</div>
</div>
</div>.fb09, .fb09 *, .fb09 *::before, .fb09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb09 {
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
/* rich gradient background so glass blur is visible */
background:
radial-gradient(ellipse 70% 55% at 25% 20%, #4f46e5, transparent),
radial-gradient(ellipse 60% 50% at 75% 80%, #ec4899, transparent),
radial-gradient(ellipse 60% 60% at 75% 20%, #0ea5e9, transparent),
#0f0a1e;
color: #fff;
position: relative;
overflow: hidden;
}
/* decorative blobs behind everything */
.fb09-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
animation: fb09-float-blob 8s ease-in-out infinite;
}
.fb09-blob--a { width: 340px; height: 340px; background: rgba(99,102,241,.35); top: -80px; left: -80px; animation-delay: 0s; }
.fb09-blob--b { width: 280px; height: 280px; background: rgba(236,72,153,.3); bottom: -60px; right: -60px; animation-delay: -4s; }
.fb09-blob--c { width: 220px; height: 220px; background: rgba(14,165,233,.25); top: 40%; left: 60%; animation-delay: -2s; }
@keyframes fb09-float-blob {
0%,100% { transform: translate(0,0); }
50% { transform: translate(20px, 15px); }
}
h1 {
font-size: clamp(1.6rem, 5vw, 2.6rem);
font-weight: 700;
text-align: center;
letter-spacing: -.025em;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
p.fb09-sub {
text-align: center;
color: rgba(255,255,255,.55);
font-size: .9rem;
max-width: 44ch;
margin: 0 auto 52px;
line-height: 1.6;
position: relative;
z-index: 2;
}
/* ── GLASS FAB mixins ── */
.fb09-glass-fab {
border: none;
cursor: pointer;
display: grid;
place-items: center;
position: relative;
outline: none;
/* glass core */
background: rgba(255,255,255,.12);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,.22);
box-shadow:
0 8px 32px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -1px 0 rgba(255,255,255,.08);
transition:
transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .22s ease,
background .22s ease;
}
.fb09-glass-fab:hover {
background: rgba(255,255,255,.18);
transform: scale(1.08) translateY(-2px);
box-shadow:
0 16px 48px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(255,255,255,.1);
}
.fb09-glass-fab:active {
transform: scale(.97);
box-shadow:
0 4px 16px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.3);
}
.fb09-glass-fab::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48%;
background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
pointer-events: none;
border-radius: inherit;
}
.fb09-glass-fab svg { fill: #fff; position: relative; z-index: 1; }
/* circle */
.fb09-glass-fab--circle { width: 64px; height: 64px; border-radius: 50%; }
.fb09-glass-fab--circle::after { border-radius: 50% 50% 0 0; }
.fb09-glass-fab--circle svg { width: 26px; height: 26px; }
/* pill */
.fb09-glass-fab--pill {
height: 54px;
padding: 0 28px;
border-radius: 27px;
gap: 10px;
display: flex;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: .9rem;
font-weight: 600;
color: #fff;
letter-spacing: .01em;
}
.fb09-glass-fab--pill::after { border-radius: 27px 27px 0 0; }
.fb09-glass-fab--pill svg { width: 20px; height: 20px; }
/* square */
.fb09-glass-fab--sq { width: 64px; height: 64px; border-radius: 18px; }
.fb09-glass-fab--sq::after { border-radius: 18px 18px 0 0; }
.fb09-glass-fab--sq svg { width: 26px; height: 26px; }
/* tinted variants */
.fb09-glass-fab--blue {
background: rgba(99,102,241,.28);
border-color: rgba(129,140,248,.4);
box-shadow: 0 8px 32px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--blue:hover { background: rgba(99,102,241,.4); box-shadow: 0 16px 48px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.fb09-glass-fab--rose {
background: rgba(236,72,153,.28);
border-color: rgba(251,113,133,.4);
box-shadow: 0 8px 32px rgba(236,72,153,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--rose:hover { background: rgba(236,72,153,.42); box-shadow: 0 16px 48px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.fb09-glass-fab--cyan {
background: rgba(6,182,212,.25);
border-color: rgba(34,211,238,.4);
box-shadow: 0 8px 32px rgba(6,182,212,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--cyan:hover { background: rgba(6,182,212,.4); box-shadow: 0 16px 48px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.35); }
/* ── layout ── */
.fb09-scene { position: relative; z-index: 2; width: min(760px, 100%); }
.fb09-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 24px;
}
.fb09-card {
background: rgba(255,255,255,.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.fb09-card-lbl {
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.fb09-pill-row {
background: rgba(255,255,255,.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: center;
}
@media (max-width: 560px) {
.fb09-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fb09-blob { animation: none; }
.fb09-glass-fab { transition: none; }
} .fb09, .fb09 *, .fb09 *::before, .fb09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb09 {
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
/* rich gradient background so glass blur is visible */
background:
radial-gradient(ellipse 70% 55% at 25% 20%, #4f46e5, transparent),
radial-gradient(ellipse 60% 50% at 75% 80%, #ec4899, transparent),
radial-gradient(ellipse 60% 60% at 75% 20%, #0ea5e9, transparent),
#0f0a1e;
color: #fff;
position: relative;
overflow: hidden;
}
/* decorative blobs behind everything */
.fb09-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
animation: fb09-float-blob 8s ease-in-out infinite;
}
.fb09-blob--a { width: 340px; height: 340px; background: rgba(99,102,241,.35); top: -80px; left: -80px; animation-delay: 0s; }
.fb09-blob--b { width: 280px; height: 280px; background: rgba(236,72,153,.3); bottom: -60px; right: -60px; animation-delay: -4s; }
.fb09-blob--c { width: 220px; height: 220px; background: rgba(14,165,233,.25); top: 40%; left: 60%; animation-delay: -2s; }
@keyframes fb09-float-blob {
0%,100% { transform: translate(0,0); }
50% { transform: translate(20px, 15px); }
}
h1 {
font-size: clamp(1.6rem, 5vw, 2.6rem);
font-weight: 700;
text-align: center;
letter-spacing: -.025em;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
p.fb09-sub {
text-align: center;
color: rgba(255,255,255,.55);
font-size: .9rem;
max-width: 44ch;
margin: 0 auto 52px;
line-height: 1.6;
position: relative;
z-index: 2;
}
/* ── GLASS FAB mixins ── */
.fb09-glass-fab {
border: none;
cursor: pointer;
display: grid;
place-items: center;
position: relative;
outline: none;
/* glass core */
background: rgba(255,255,255,.12);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,.22);
box-shadow:
0 8px 32px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -1px 0 rgba(255,255,255,.08);
transition:
transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .22s ease,
background .22s ease;
}
.fb09-glass-fab:hover {
background: rgba(255,255,255,.18);
transform: scale(1.08) translateY(-2px);
box-shadow:
0 16px 48px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(255,255,255,.1);
}
.fb09-glass-fab:active {
transform: scale(.97);
box-shadow:
0 4px 16px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.3);
}
.fb09-glass-fab::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48%;
background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
pointer-events: none;
border-radius: inherit;
}
.fb09-glass-fab svg { fill: #fff; position: relative; z-index: 1; }
/* circle */
.fb09-glass-fab--circle { width: 64px; height: 64px; border-radius: 50%; }
.fb09-glass-fab--circle::after { border-radius: 50% 50% 0 0; }
.fb09-glass-fab--circle svg { width: 26px; height: 26px; }
/* pill */
.fb09-glass-fab--pill {
height: 54px;
padding: 0 28px;
border-radius: 27px;
gap: 10px;
display: flex;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: .9rem;
font-weight: 600;
color: #fff;
letter-spacing: .01em;
}
.fb09-glass-fab--pill::after { border-radius: 27px 27px 0 0; }
.fb09-glass-fab--pill svg { width: 20px; height: 20px; }
/* square */
.fb09-glass-fab--sq { width: 64px; height: 64px; border-radius: 18px; }
.fb09-glass-fab--sq::after { border-radius: 18px 18px 0 0; }
.fb09-glass-fab--sq svg { width: 26px; height: 26px; }
/* tinted variants */
.fb09-glass-fab--blue {
background: rgba(99,102,241,.28);
border-color: rgba(129,140,248,.4);
box-shadow: 0 8px 32px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--blue:hover { background: rgba(99,102,241,.4); box-shadow: 0 16px 48px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.fb09-glass-fab--rose {
background: rgba(236,72,153,.28);
border-color: rgba(251,113,133,.4);
box-shadow: 0 8px 32px rgba(236,72,153,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--rose:hover { background: rgba(236,72,153,.42); box-shadow: 0 16px 48px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.fb09-glass-fab--cyan {
background: rgba(6,182,212,.25);
border-color: rgba(34,211,238,.4);
box-shadow: 0 8px 32px rgba(6,182,212,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}
.fb09-glass-fab--cyan:hover { background: rgba(6,182,212,.4); box-shadow: 0 16px 48px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.35); }
/* ── layout ── */
.fb09-scene { position: relative; z-index: 2; width: min(760px, 100%); }
.fb09-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 24px;
}
.fb09-card {
background: rgba(255,255,255,.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.fb09-card-lbl {
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.fb09-pill-row {
background: rgba(255,255,255,.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: center;
}
@media (max-width: 560px) {
.fb09-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fb09-blob { animation: none; }
.fb09-glass-fab { transition: none; }
}