Glassmorphism UI Kit - Free HTML/CSS UI Kit

Navbars

Simple Glass Navbar

HTML

<nav class="gm-navbar gm-glass">
    <div class="gm-nav-container">
        <div class="gm-logo">
            <div class="gm-logo-icon"></div>
            <span>Glass<span>UI</span></span>
        </div>
        <ul class="gm-nav-links">
            <li><a href="##" class="active">Home</a></li>
            <li><a href="##">Features</a></li>
            <li><a href="##">Solutions</a></li>
            <li><a href="##">Pricing</a></li>
        </ul>
        <div class="gm-nav-actions">
            <a href="##" class="gm-btn gm-btn-ghost">Sign In</a>
            <a href="##" class="gm-btn gm-btn-primary">Get Started</a>
        </div>
    </div>
</nav>

CSS (Component Only)

/* Component: Simple Glass Navbar */
/* NOTE: This component requires base.css to be included in your page. */

.gm-navbar {
    position: sticky;
    top: 1rem;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0 1rem;
    border-radius: 20px;
    padding: 0.75rem 0;
}

.gm-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
}

.gm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--gm-font-heading);
    color: white;
}

.gm-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--gm-primary), var(--gm-accent));
    border-radius: 8px;
    position: relative;
}

.gm-logo-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}

.gm-logo span span {
    color: var(--gm-primary);
}

.gm-nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-nav-links a {
    text-decoration: none;
    color: var(--gm-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
}

.gm-nav-links a:hover,
.gm-nav-links a.active {
    color: white;
}

.gm-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gm-primary);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--gm-primary-glow);
}

.gm-nav-actions {
    display: flex;
    gap: 1rem;
}

@media (max-width: 768px) {
    .gm-nav-links {
        display: none;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-navbar {
    position: sticky;
    top: 1rem;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0 1rem;
    border-radius: 20px;
    padding: 0.75rem 0;
}

.gm-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
}

.gm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--gm-font-heading);
    color: white;
}

.gm-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--gm-primary), var(--gm-accent));
    border-radius: 8px;
    position: relative;
}

.gm-logo-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}

.gm-logo span span {
    color: var(--gm-primary);
}

.gm-nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-nav-links a {
    text-decoration: none;
    color: var(--gm-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
}

.gm-nav-links a:hover,
.gm-nav-links a.active {
    color: white;
}

.gm-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gm-primary);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--gm-primary-glow);
}

.gm-nav-actions {
    display: flex;
    gap: 1rem;
}

@media (max-width: 768px) {
    .gm-nav-links {
        display: none;
    }
}

Glass Sidebar

HTML

<aside class="gm-sidebar gm-glass">
    <div class="gm-sidebar-header">
        <div class="gm-logo">
            <div class="gm-logo-icon"></div>
            <span>Glass<span>UI</span></span>
        </div>
    </div>
    <nav class="gm-sidebar-nav">
        <ul>
            <li><a href="##" class="active"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> Dashboard</a></li>
            <li><a href="##"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> Team</a></li>
            <li><a href="##"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg> Projects</a></li>
            <li><a href="##"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Calendar</a></li>
            <li><a href="##"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a></li>
        </ul>
        <div class="gm-nav-divider"></div>
        <ul>
            <li><a href="##"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> Settings</a></li>
        </ul>
    </nav>
    <div class="gm-sidebar-footer">
        <div class="gm-user-profile">
            <div class="gm-avatar">
                <img src="https://i.pravatar.cc/100?img=32" alt="User">
                <div class="gm-status-indicator"></div>
            </div>
            <div class="gm-user-info">
                <strong>Sarah Jenkins</strong>
                <span>Pro Member</span>
            </div>
        </div>
    </div>
</aside>

CSS (Component Only)

/* Component: Glass Sidebar */
/* NOTE: This component requires base.css to be included in your page. */

.gm-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for iframe stability */
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.gm-sidebar-header {
    margin-bottom: 2.5rem;
}

.gm-sidebar-nav {
    flex: 1;
}

.gm-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: var(--gm-text-muted);
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.gm-sidebar-nav a svg {
    opacity: 0.7;
    transition: all 0.3s ease;
}

.gm-sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.gm-sidebar-nav a.active {
    background: linear-gradient(135deg, var(--gm-primary), var(--gm-accent));
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-sidebar-nav a.active svg {
    opacity: 1;
}

.gm-nav-divider {
    height: 1px;
    background: var(--gm-glass-border);
    margin: 1.5rem 0;
}

.gm-sidebar-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--gm-glass-border);
}

.gm-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gm-avatar {
    position: relative;
    width: 42px;
    height: 42px;
}

.gm-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.gm-status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.gm-user-info {
    display: flex;
    flex-direction: column;
}

.gm-user-info strong {
    font-size: 0.95rem;
    color: white;
}

.gm-user-info span {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for iframe stability */
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.gm-sidebar-header {
    margin-bottom: 2.5rem;
}

.gm-sidebar-nav {
    flex: 1;
}

.gm-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: var(--gm-text-muted);
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.gm-sidebar-nav a svg {
    opacity: 0.7;
    transition: all 0.3s ease;
}

.gm-sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.gm-sidebar-nav a.active {
    background: linear-gradient(135deg, var(--gm-primary), var(--gm-accent));
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-sidebar-nav a.active svg {
    opacity: 1;
}

.gm-nav-divider {
    height: 1px;
    background: var(--gm-glass-border);
    margin: 1.5rem 0;
}

.gm-sidebar-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--gm-glass-border);
}

.gm-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gm-avatar {
    position: relative;
    width: 42px;
    height: 42px;
}

.gm-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.gm-status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.gm-user-info {
    display: flex;
    flex-direction: column;
}

.gm-user-info strong {
    font-size: 0.95rem;
    color: white;
}

.gm-user-info span {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

Hero Sections

Centered Glass Hero

HTML

<section class="gm-hero-centered">
    <div class="gm-mesh-bg"></div>
    <div class="gm-hero-container">
        <div class="gm-badge gm-glass">
            <span class="gm-badge-dot"></span>
            v2.0 is now live
        </div>
        <h1 class="gm-hero-title">Future of Design is <span class="gm-text-gradient">Translucent</span></h1>
        <p class="gm-hero-subtitle">Experience the next generation of user interfaces with our premium glassmorphism components. Built for performance and stunning aesthetics.</p>
        <div class="gm-hero-actions">
            <a href="##" class="gm-btn gm-btn-primary">Get Started Now</a>
            <a href="##" class="gm-btn gm-btn-outline">View Documentation</a>
        </div>
        <div class="gm-hero-mockup gm-glass">
            <div class="gm-mockup-header">
                <div class="gm-dots"><span></span><span></span><span></span></div>
            </div>
            <div class="gm-mockup-content">
                <div class="gm-skeleton-title"></div>
                <div class="gm-skeleton-grid">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS (Component Only)

/* Component: Centered Glass Hero */
/* NOTE: This component requires base.css to be included in your page. */

.gm-hero-centered {
    position: relative;
    padding: 8rem 2rem;
    overflow: hidden;
    background: #0f172a;
    border-radius: 32px;
    margin-bottom: 4rem;
}

.gm-mesh-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.1) 0%, transparent 50%);
    filter: blur(80px);
}

.gm-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.gm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2rem;
}

.gm-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--gm-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gm-primary);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.gm-hero-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
}

.gm-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--gm-text-muted);
    max-width: 700px;
    margin: 0 auto 3rem;
}

.gm-hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 5rem;
}

.gm-hero-mockup {
    border-radius: 20px 20px 0 0;
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: none;
}

.gm-mockup-header {
    display: flex;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gm-glass-border);
    margin-bottom: 1.5rem;
}

.gm-dots {
    display: flex;
    gap: 0.5rem;
}

.gm-dots span {
    width: 10px;
    height: 10px;
    background: var(--gm-glass-border);
    border-radius: 50%;
}

.gm-mockup-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gm-skeleton-title {
    height: 20px;
    width: 40%;
    background: var(--gm-glass-border);
    border-radius: 10px;
}

.gm-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gm-skeleton-grid div {
    height: 100px;
    background: var(--gm-glass-bg);
    border-radius: 12px;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-hero-centered {
    position: relative;
    padding: 8rem 2rem;
    overflow: hidden;
    background: #0f172a;
    border-radius: 32px;
    margin-bottom: 4rem;
}

.gm-mesh-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.1) 0%, transparent 50%);
    filter: blur(80px);
}

.gm-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.gm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2rem;
}

.gm-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--gm-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gm-primary);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.gm-hero-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
}

.gm-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--gm-text-muted);
    max-width: 700px;
    margin: 0 auto 3rem;
}

.gm-hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 5rem;
}

.gm-hero-mockup {
    border-radius: 20px 20px 0 0;
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: none;
}

.gm-mockup-header {
    display: flex;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gm-glass-border);
    margin-bottom: 1.5rem;
}

.gm-dots {
    display: flex;
    gap: 0.5rem;
}

.gm-dots span {
    width: 10px;
    height: 10px;
    background: var(--gm-glass-border);
    border-radius: 50%;
}

.gm-mockup-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gm-skeleton-title {
    height: 20px;
    width: 40%;
    background: var(--gm-glass-border);
    border-radius: 10px;
}

.gm-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gm-skeleton-grid div {
    height: 100px;
    background: var(--gm-glass-bg);
    border-radius: 12px;
}

Split Glass Hero

HTML

<section class="gm-hero-split">
    <div class="gm-hero-content">
        <h2 class="gm-hero-title">Beautifully Crafted <span class="gm-text-gradient">Interfaces</span></h2>
        <p class="gm-hero-subtitle">High-quality components with glassmorphism at its core. Create stunning dashboards and landing pages in minutes.</p>
        <div class="gm-hero-actions">
            <a href="##" class="gm-btn gm-btn-primary">Start Building</a>
            <a href="##" class="gm-btn gm-btn-outline">Browse Components</a>
        </div>
    </div>
    <div class="gm-hero-visual">
        <div class="gm-visual-card gm-glass card-1">
            <div class="gm-card-icon">📈</div>
            <div class="gm-card-val">+24%</div>
            <div class="gm-card-label">Revenue Growth</div>
        </div>
        <div class="gm-visual-card gm-glass card-2">
            <div class="gm-card-icon">👥</div>
            <div class="gm-card-val">12.5k</div>
            <div class="gm-card-label">Active Users</div>
        </div>
        <div class="gm-visual-circle circle-1"></div>
        <div class="gm-visual-circle circle-2"></div>
    </div>
</section>

CSS (Component Only)

/* Component: Split Glass Hero */
/* NOTE: This component requires base.css to be included in your page. */

.gm-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.gm-hero-visual {
    position: relative;
    height: 400px;
}

.gm-visual-card {
    position: absolute;
    padding: 1.5rem;
    border-radius: 24px;
    width: 200px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-5deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(5deg); }

.gm-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.gm-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.gm-card-val { font-size: 1.5rem; font-weight: 800; color: white; }
.gm-card-label { font-size: 0.85rem; color: var(--gm-text-muted); }

.gm-visual-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(40px);
}

.circle-1 {
    width: 250px; height: 250px;
    background: var(--gm-primary);
    top: 0; right: 0;
    opacity: 0.3;
}

.circle-2 {
    width: 200px; height: 200px;
    background: var(--gm-accent);
    bottom: 0; left: 10%;
    opacity: 0.3;
}

@media (max-width: 992px) {
    .gm-hero-split { grid-template-columns: 1fr; text-align: center; }
    .gm-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.gm-hero-visual {
    position: relative;
    height: 400px;
}

.gm-visual-card {
    position: absolute;
    padding: 1.5rem;
    border-radius: 24px;
    width: 200px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-5deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(5deg); }

.gm-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.gm-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.gm-card-val { font-size: 1.5rem; font-weight: 800; color: white; }
.gm-card-label { font-size: 0.85rem; color: var(--gm-text-muted); }

.gm-visual-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(40px);
}

.circle-1 {
    width: 250px; height: 250px;
    background: var(--gm-primary);
    top: 0; right: 0;
    opacity: 0.3;
}

.circle-2 {
    width: 200px; height: 200px;
    background: var(--gm-accent);
    bottom: 0; left: 10%;
    opacity: 0.3;
}

@media (max-width: 992px) {
    .gm-hero-split { grid-template-columns: 1fr; text-align: center; }
    .gm-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; }
}

Buttons

Primary Glass Buttons

HTML

<div class="gm-btn-group">
    <button class="gm-btn gm-btn-primary">Primary Action</button>
    <button class="gm-btn gm-btn-primary">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
        With Icon
    </button>
    <button class="gm-btn gm-btn-primary" disabled>Disabled</button>
</div>

CSS (Component Only)

/* Component: Primary Glass Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.gm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.gm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.gm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

Outline Glass Buttons

HTML

<div class="gm-btn-group">
    <button class="gm-btn gm-btn-outline">Outline Action</button>
    <button class="gm-btn gm-btn-outline">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
        Download
    </button>
    <button class="gm-btn gm-btn-outline" disabled>Disabled</button>
</div>

CSS (Component Only)

/* Component: Outline Glass Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.gm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

Forms

Glass Login Form

HTML

<div class="gm-login-card gm-glass">
    <div class="gm-login-header">
        <h3>Welcome Back</h3>
        <p>Please enter your details to sign in.</p>
    </div>
    <form class="gm-form">
        <div class="gm-form-group">
            <label for="email">Email Address</label>
            <div class="gm-input-wrapper">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                <input type="email" id="email" placeholder="[email protected]" required>
            </div>
        </div>
        <div class="gm-form-group">
            <label for="password">Password</label>
            <div class="gm-input-wrapper">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                <input type="password" id="password" placeholder="••••••••" required>
            </div>
        </div>
        <div class="gm-form-options">
            <label class="gm-checkbox">
                <input type="checkbox">
                <span>Remember me</span>
            </label>
            <a href="##" class="gm-forgot-link">Forgot password?</a>
        </div>
        <button type="submit" class="gm-btn gm-btn-primary gm-btn-block">Sign In</button>
    </form>
    <div class="gm-login-footer">
        Don't have an account? <a href="##">Sign up</a>
    </div>
</div>

CSS (Component Only)

/* Component: Glass Login Form */
/* NOTE: This component requires base.css to be included in your page. */

.gm-login-card {
    max-width: 420px;
    margin: 4rem auto;
    padding: 3rem;
    border-radius: 32px;
}

.gm-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.gm-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: white;
}

.gm-login-header p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
}

.gm-form-group {
    margin-bottom: 1.5rem;
}

.gm-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gm-text-muted);
}

.gm-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gm-input-wrapper svg {
    position: absolute;
    left: 1.25rem;
    color: var(--gm-text-muted);
}

.gm-input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gm-glass-border);
    border-radius: 14px;
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.gm-input-wrapper input:focus {
    outline: none;
    border-color: var(--gm-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px var(--gm-primary-glow);
}

.gm-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.gm-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.gm-checkbox input {
    accent-color: var(--gm-primary);
}

.gm-forgot-link {
    color: var(--gm-primary);
    text-decoration: none;
}

.gm-login-footer {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--gm-text-muted);
}

.gm-login-footer a {
    color: var(--gm-primary);
    text-decoration: none;
    font-weight: 600;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-login-card {
    max-width: 420px;
    margin: 4rem auto;
    padding: 3rem;
    border-radius: 32px;
}

.gm-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.gm-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: white;
}

.gm-login-header p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
}

.gm-form-group {
    margin-bottom: 1.5rem;
}

.gm-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gm-text-muted);
}

.gm-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gm-input-wrapper svg {
    position: absolute;
    left: 1.25rem;
    color: var(--gm-text-muted);
}

.gm-input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gm-glass-border);
    border-radius: 14px;
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.gm-input-wrapper input:focus {
    outline: none;
    border-color: var(--gm-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px var(--gm-primary-glow);
}

.gm-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.gm-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.gm-checkbox input {
    accent-color: var(--gm-primary);
}

.gm-forgot-link {
    color: var(--gm-primary);
    text-decoration: none;
}

.gm-login-footer {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--gm-text-muted);
}

.gm-login-footer a {
    color: var(--gm-primary);
    text-decoration: none;
    font-weight: 600;
}

Glass Settings Form

HTML

<div class="gm-settings-panel gm-glass">
    <div class="gm-panel-header">
        <h3>Profile Settings</h3>
        <p>Update your personal information and public profile.</p>
    </div>
    <form class="gm-settings-form">
        <div class="gm-form-row">
            <div class="gm-avatar-upload">
                <img src="https://i.pravatar.cc/100?img=32" alt="">
                <button type="button" class="gm-btn gm-btn-outline">Change Photo</button>
            </div>
        </div>
        <div class="gm-form-grid">
            <div class="gm-form-group">
                <label>First Name</label>
                <input type="text" value="Sarah">
            </div>
            <div class="gm-form-group">
                <label>Last Name</label>
                <input type="text" value="Jenkins">
            </div>
        </div>
        <div class="gm-form-group">
            <label>Bio</label>
            <textarea rows="4">Product Designer and Glassmorphism enthusiast. Based in San Francisco.</textarea>
        </div>
        <div class="gm-panel-footer">
            <button type="button" class="gm-btn gm-btn-ghost">Cancel</button>
            <button type="submit" class="gm-btn gm-btn-primary">Save Changes</button>
        </div>
    </form>
</div>

CSS (Component Only)

/* Component: Glass Settings Form */
/* NOTE: This component requires base.css to be included in your page. */

.gm-settings-panel {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2.5rem;
    border-radius: 32px;
}

.gm-panel-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gm-glass-border);
}

.gm-panel-header h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.gm-avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gm-avatar-upload img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    border: 2px solid var(--gm-glass-border);
}

.gm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gm-settings-form input,
.gm-settings-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gm-glass-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: white;
    font-family: inherit;
    transition: all 0.3s ease;
}

.gm-settings-form input:focus,
.gm-settings-form textarea:focus {
    outline: none;
    border-color: var(--gm-primary);
    background: rgba(255, 255, 255, 0.1);
}

.gm-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gm-glass-border);
}

@media (max-width: 600px) {
    .gm-form-grid { grid-template-columns: 1fr; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-settings-panel {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2.5rem;
    border-radius: 32px;
}

.gm-panel-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gm-glass-border);
}

.gm-panel-header h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.gm-avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gm-avatar-upload img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    border: 2px solid var(--gm-glass-border);
}

.gm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gm-settings-form input,
.gm-settings-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gm-glass-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: white;
    font-family: inherit;
    transition: all 0.3s ease;
}

.gm-settings-form input:focus,
.gm-settings-form textarea:focus {
    outline: none;
    border-color: var(--gm-primary);
    background: rgba(255, 255, 255, 0.1);
}

.gm-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gm-glass-border);
}

@media (max-width: 600px) {
    .gm-form-grid { grid-template-columns: 1fr; }
}

Cards

Glass Stat Cards

HTML

<div class="gm-stats-grid">
    <div class="gm-stat-card gm-glass">
        <div class="gm-stat-header">
            <div class="gm-stat-icon icon-blue">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
            </div>
            <span class="gm-trend trend-up">+12.5%</span>
        </div>
        <div class="gm-stat-value">$71,897</div>
        <div class="gm-stat-label">Total Revenue</div>
    </div>
    
    <div class="gm-stat-card gm-glass">
        <div class="gm-stat-header">
            <div class="gm-stat-icon icon-pink">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            </div>
            <span class="gm-trend trend-up">+5.2%</span>
        </div>
        <div class="gm-stat-value">24.5k</div>
        <div class="gm-stat-label">Active Users</div>
    </div>
</div>

CSS (Component Only)

/* Component: Glass Stat Cards */
/* NOTE: This component requires base.css to be included in your page. */

.gm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.gm-stat-card {
    padding: 2rem;
    border-radius: 28px;
    transition: transform 0.3s ease;
}

.gm-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.gm-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.gm-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-blue { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.icon-pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }

.gm-trend {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
}

.trend-up { background: rgba(16, 185, 129, 0.1); color: #34d399; }

.gm-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.25rem;
    font-family: var(--gm-font-heading);
}

.gm-stat-label {
    font-size: 0.95rem;
    color: var(--gm-text-muted);
    font-weight: 500;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.gm-stat-card {
    padding: 2rem;
    border-radius: 28px;
    transition: transform 0.3s ease;
}

.gm-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.gm-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.gm-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-blue { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.icon-pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }

.gm-trend {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
}

.trend-up { background: rgba(16, 185, 129, 0.1); color: #34d399; }

.gm-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.25rem;
    font-family: var(--gm-font-heading);
}

.gm-stat-label {
    font-size: 0.95rem;
    color: var(--gm-text-muted);
    font-weight: 500;
}

Glass Pricing Card

HTML

<div class="gm-pricing-card gm-glass popular">
    <div class="gm-popular-badge">Most Popular</div>
    <div class="gm-pricing-header">
        <h4>Startup</h4>
        <p>Best for growing teams</p>
    </div>
    <div class="gm-pricing-price">
        <span class="gm-currency">$</span>
        <span class="gm-amount">49</span>
        <span class="gm-period">/mo</span>
    </div>
    <ul class="gm-pricing-features">
        <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> 20 Team Members</li>
        <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> 50GB Cloud Storage</li>
        <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> Priority Support</li>
        <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> Advanced Analytics</li>
    </ul>
    <button class="gm-btn gm-btn-primary gm-btn-block">Start Free Trial</button>
</div>

CSS (Component Only)

/* Component: Glass Pricing Card */
/* NOTE: This component requires base.css to be included in your page. */

.gm-pricing-card {
    max-width: 380px;
    padding: 3rem;
    border-radius: 32px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.gm-pricing-card:hover {
    transform: translateY(-10px);
}

.gm-pricing-card.popular {
    border-color: var(--gm-primary);
    box-shadow: 0 10px 40px var(--gm-primary-glow);
}

.gm-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gm-primary);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
}

.gm-pricing-header h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

.gm-pricing-header p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.gm-pricing-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 2.5rem;
}

.gm-currency { font-size: 1.5rem; font-weight: 600; color: var(--gm-text-muted); margin-right: 0.25rem; }
.gm-amount { font-size: 4rem; font-weight: 800; color: white; font-family: var(--gm-font-heading); }
.gm-period { font-size: 1.1rem; color: var(--gm-text-muted); }

.gm-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gm-text-muted);
    font-size: 0.95rem;
}

.gm-pricing-features svg {
    color: var(--gm-primary);
    flex-shrink: 0;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-pricing-card {
    max-width: 380px;
    padding: 3rem;
    border-radius: 32px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.gm-pricing-card:hover {
    transform: translateY(-10px);
}

.gm-pricing-card.popular {
    border-color: var(--gm-primary);
    box-shadow: 0 10px 40px var(--gm-primary-glow);
}

.gm-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gm-primary);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
}

.gm-pricing-header h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

.gm-pricing-header p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.gm-pricing-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 2.5rem;
}

.gm-currency { font-size: 1.5rem; font-weight: 600; color: var(--gm-text-muted); margin-right: 0.25rem; }
.gm-amount { font-size: 4rem; font-weight: 800; color: white; font-family: var(--gm-font-heading); }
.gm-period { font-size: 1.1rem; color: var(--gm-text-muted); }

.gm-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gm-text-muted);
    font-size: 0.95rem;
}

.gm-pricing-features svg {
    color: var(--gm-primary);
    flex-shrink: 0;
}

Tables

Glass Data Grid

HTML

<div class="gm-table-container gm-glass">
    <table class="gm-table">
        <thead>
            <tr>
                <th>Member</th>
                <th>Status</th>
                <th>Role</th>
                <th>Last Active</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="gm-table-user">
                        <img src="https://i.pravatar.cc/100?img=1" alt="">
                        <div class="gm-user-meta">
                            <strong>Alice Johnson</strong>
                            <span>[email protected]</span>
                        </div>
                    </div>
                </td>
                <td><span class="gm-status-badge status-active">Active</span></td>
                <td>Senior Designer</td>
                <td>2 mins ago</td>
                <td class="gm-table-actions"><button class="gm-btn-icon">•••</button></td>
            </tr>
            <tr>
                <td>
                    <div class="gm-table-user">
                        <img src="https://i.pravatar.cc/100?img=2" alt="">
                        <div class="gm-user-meta">
                            <strong>Bob Smith</strong>
                            <span>[email protected]</span>
                        </div>
                    </div>
                </td>
                <td><span class="gm-status-badge status-away">Away</span></td>
                <td>Lead Developer</td>
                <td>1 hour ago</td>
                <td class="gm-table-actions"><button class="gm-btn-icon">•••</button></td>
            </tr>
        </tbody>
    </table>
</div>

CSS (Component Only)

/* Component: Glass Data Grid */
/* NOTE: This component requires base.css to be included in your page. */

.gm-table-container {
    border-radius: 24px;
    overflow: hidden;
    margin: 2rem 0;
}

.gm-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.gm-table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gm-text-muted);
}

.gm-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gm-glass-border);
    color: white;
    font-size: 0.95rem;
}

.gm-table tr:last-child td {
    border-bottom: none;
}

.gm-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.gm-table-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gm-table-user img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.gm-user-meta {
    display: flex;
    flex-direction: column;
}

.gm-user-meta span {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

.gm-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-active { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.status-away { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.gm-btn-icon {
    background: transparent;
    border: none;
    color: var(--gm-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-table-container {
    border-radius: 24px;
    overflow: hidden;
    margin: 2rem 0;
}

.gm-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.gm-table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gm-text-muted);
}

.gm-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gm-glass-border);
    color: white;
    font-size: 0.95rem;
}

.gm-table tr:last-child td {
    border-bottom: none;
}

.gm-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.gm-table-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gm-table-user img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.gm-user-meta {
    display: flex;
    flex-direction: column;
}

.gm-user-meta span {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

.gm-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-active { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.status-away { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.gm-btn-icon {
    background: transparent;
    border: none;
    color: var(--gm-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
}

Lists

Glass Activity Feed

HTML

<div class="gm-activity-feed gm-glass">
    <div class="gm-activity-item">
        <div class="gm-activity-marker marker-blue"></div>
        <div class="gm-activity-content">
            <p><strong>Design System</strong> update by <strong>Alex Rivers</strong></p>
            <span class="gm-activity-time">Just now</span>
        </div>
    </div>
    <div class="gm-activity-item">
        <div class="gm-activity-marker marker-pink"></div>
        <div class="gm-activity-content">
            <p><strong>New Campaign</strong> "Summer Glow" launched</p>
            <span class="gm-activity-time">2 hours ago</span>
        </div>
    </div>
    <div class="gm-activity-item">
        <div class="gm-activity-marker marker-purple"></div>
        <div class="gm-activity-content">
            <p><strong>Deployment</strong> to production successful</p>
            <span class="gm-activity-time">Yesterday at 4:32 PM</span>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Glass Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */

.gm-activity-feed {
    padding: 1.5rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-activity-item {
    display: flex;
    gap: 1.25rem;
    padding: 1rem;
    border-radius: 16px;
    transition: background 0.3s ease;
}

.gm-activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gm-activity-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
    position: relative;
}

.gm-activity-marker::after {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.3;
}

.marker-blue { background: #60a5fa; color: #60a5fa; }
.marker-pink { background: #f472b6; color: #f472b6; }
.marker-purple { background: #a78bfa; color: #a78bfa; }

.gm-activity-content p {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 0.25rem;
}

.gm-activity-content strong {
    color: var(--gm-primary);
}

.gm-activity-time {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-activity-feed {
    padding: 1.5rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gm-activity-item {
    display: flex;
    gap: 1.25rem;
    padding: 1rem;
    border-radius: 16px;
    transition: background 0.3s ease;
}

.gm-activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gm-activity-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
    position: relative;
}

.gm-activity-marker::after {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.3;
}

.marker-blue { background: #60a5fa; color: #60a5fa; }
.marker-pink { background: #f472b6; color: #f472b6; }
.marker-purple { background: #a78bfa; color: #a78bfa; }

.gm-activity-content p {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 0.25rem;
}

.gm-activity-content strong {
    color: var(--gm-primary);
}

.gm-activity-time {
    font-size: 0.8rem;
    color: var(--gm-text-muted);
}

Modals

Glass Confirmation Modal

HTML

<div class="gm-modal-overlay">
    <div class="gm-modal gm-glass">
        <div class="gm-modal-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
        </div>
        <div class="gm-modal-content">
            <h3>Delete Project?</h3>
            <p>This action is permanent and cannot be undone. All associated data will be lost forever.</p>
        </div>
        <div class="gm-modal-footer">
            <button class="gm-btn gm-btn-ghost">Cancel</button>
            <button class="gm-btn gm-btn-primary" style="background: #ef4444; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);">Delete Forever</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Glass Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */

.gm-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 10;
}

.gm-modal {
    max-width: 450px;
    width: 100%;
    padding: 2.5rem;
    border-radius: 32px;
    text-align: center;
    animation: modal-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.gm-modal-icon {
    width: 64px;
    height: 64px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.gm-modal-content h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.75rem;
}

.gm-modal-content p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.gm-modal-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 10;
}

.gm-modal {
    max-width: 450px;
    width: 100%;
    padding: 2.5rem;
    border-radius: 32px;
    text-align: center;
    animation: modal-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.gm-modal-icon {
    width: 64px;
    height: 64px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.gm-modal-content h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.75rem;
}

.gm-modal-content p {
    color: var(--gm-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.gm-modal-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

Footers

Glass Footer

HTML

<footer class="gm-footer gm-glass">
    <div class="gm-footer-container">
        <div class="gm-footer-brand">
            <div class="gm-logo">
                <div class="gm-logo-icon"></div>
                <span>Glass<span>UI</span></span>
            </div>
            <p>Premium components for modern builders.</p>
        </div>
        <div class="gm-footer-links">
            <div class="gm-link-group">
                <h5>Product</h5>
                <a href="##">Components</a>
                <a href="##">Templates</a>
                <a href="##">Pricing</a>
            </div>
            <div class="gm-link-group">
                <h5>Company</h5>
                <a href="##">About</a>
                <a href="##">Blog</a>
                <a href="##">Careers</a>
            </div>
        </div>
    </div>
    <div class="gm-footer-bottom">
        <p>&copy; 2026 GlassUI Kit. All rights reserved.</p>
        <div class="gm-social">
            <a href="##">Twitter</a>
            <a href="##">GitHub</a>
            <a href="##">Dribbble</a>
        </div>
    </div>
</footer>

CSS (Component Only)

/* Component: Glass Footer */
/* NOTE: This component requires base.css to be included in your page. */

.gm-footer {
    border-radius: 32px 32px 0 0;
    padding: 4rem 2rem 2rem;
    margin-top: 4rem;
}

.gm-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}

.gm-footer-brand {
    max-width: 300px;
}

.gm-footer-brand p {
    color: var(--gm-text-muted);
    margin-top: 1rem;
    font-size: 0.95rem;
}

.gm-footer-links {
    display: flex;
    gap: 4rem;
}

.gm-link-group h5 {
    color: white;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.gm-link-group a {
    display: block;
    color: var(--gm-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.gm-link-group a:hover {
    color: var(--gm-primary);
}

.gm-footer-bottom {
    max-width: 1200px;
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--gm-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gm-text-muted);
    font-size: 0.85rem;
}

.gm-social {
    display: flex;
    gap: 1.5rem;
}

.gm-social a {
    color: var(--gm-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.gm-social a:hover {
    color: white;
}

@media (max-width: 768px) {
    .gm-footer-container { flex-direction: column; }
    .gm-footer-links { gap: 2rem; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --gm-primary: #6366f1;
    --gm-primary-glow: rgba(99, 102, 241, 0.5);
    --gm-accent: #ec4899;
    --gm-accent-glow: rgba(236, 72, 153, 0.5);
    --gm-glass-bg: rgba(255, 255, 255, 0.2);
    --gm-glass-border: rgba(255, 255, 255, 0.3);
    --gm-glass-blur: blur(20px);
    --gm-text-main: #ffffff;
    --gm-text-muted: rgba(255, 255, 255, 0.7);
    --gm-font-heading: 'Outfit', sans-serif;
    --gm-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--gm-font-body);
    color: var(--gm-text-main);
    background: #0f172a;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utility */
.gm-glass {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--gm-glass-blur) saturate(180%);
    border: 1px solid var(--gm-glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Buttons */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--gm-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.gm-btn-primary {
    background: var(--gm-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gm-primary-glow);
}

.gm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--gm-primary-glow);
    filter: brightness(1.1);
}

.gm-btn-outline {
    background: var(--gm-glass-bg);
    backdrop-filter: var(--gm-glass-blur);
    -webkit-backdrop-filter: var(--gm-glass-blur);
    border: 1px solid var(--gm-glass-border);
    color: white;
}

.gm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.gm-btn-ghost {
    background: transparent;
    color: white;
}

.gm-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gm-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gm-font-heading);
    margin: 0;
}

p {
    line-height: 1.6;
    margin: 0;
}

.gm-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--gm-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.gm-footer {
    border-radius: 32px 32px 0 0;
    padding: 4rem 2rem 2rem;
    margin-top: 4rem;
}

.gm-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}

.gm-footer-brand {
    max-width: 300px;
}

.gm-footer-brand p {
    color: var(--gm-text-muted);
    margin-top: 1rem;
    font-size: 0.95rem;
}

.gm-footer-links {
    display: flex;
    gap: 4rem;
}

.gm-link-group h5 {
    color: white;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.gm-link-group a {
    display: block;
    color: var(--gm-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.gm-link-group a:hover {
    color: var(--gm-primary);
}

.gm-footer-bottom {
    max-width: 1200px;
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--gm-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gm-text-muted);
    font-size: 0.85rem;
}

.gm-social {
    display: flex;
    gap: 1.5rem;
}

.gm-social a {
    color: var(--gm-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.gm-social a:hover {
    color: white;
}

@media (max-width: 768px) {
    .gm-footer-container { flex-direction: column; }
    .gm-footer-links { gap: 2rem; }
}

Glassmorphism UI Kit - Free HTML/CSS UI Kit

Just need one component?

Color Palette

Typography

Navbars

Simple Glass Navbar

Glass Sidebar

Hero Sections

Centered Glass Hero

Split Glass Hero

Buttons

Primary Glass Buttons

Outline Glass Buttons

Forms

Glass Settings Form

Cards

Glass Stat Cards

Glass Pricing Card

Tables

Glass Data Grid

Lists

Glass Activity Feed

Modals

Footers

Glass Footer