Glassmorphism UI Library
A complete CSS component library with glassmorphism aesthetics – built by Jungherz GmbH. Pure CSS, no dependencies, Dark & Light mode.
Installation
Include one CSS file – done. Optionally add a theme override for custom brand colors.
<!-- Base Library -->
<link rel="stylesheet" href="glasskit.css">
<!-- Optional: Theme Override -->
<link rel="stylesheet" href="theme-override.css">
<!-- Dark Mode (Default) -->
<html data-theme="dark">
<!-- Light Mode -->
<html data-theme="light">
Design Tokens
All visual values are controlled via CSS Custom Properties.
Color Palette
| Token | Dark Value | Usage |
|---|---|---|
--gl-color-primary | #f5a623 | Primary color, buttons, active elements |
--gl-color-primary-dark | #d4692a | Gradient end value |
--gl-color-text | #ffffff | Default text color |
--gl-color-text-muted | rgba(255,255,255,0.60) | Secondary text |
--gl-color-success | #34c759 | Success status |
--gl-color-error | #ff3b30 | Error status |
Glass Surfaces
| Token | Value | Usage |
|---|---|---|
--gl-surface-1 | rgba(…, 0.08) | Subtlest surface (status) |
--gl-surface-2 | rgba(…, 0.10) | Default (inputs, cards) |
--gl-surface-3 | rgba(…, 0.14) | Nav pills, badges |
--gl-surface-4 | rgba(…, 0.16) | Hover states |
--gl-surface-5 | rgba(…, 0.22) | Strong hover |
--gl-surface-milk-strong | rgba(…, 0.75) | Secondary button |
Spacing & Radii
| Token | Value | Token | Value |
|---|---|---|---|
--gl-space-2xs | 4px | --gl-radius-xs | 8px |
--gl-space-xs | 8px | --gl-radius-sm | 12px |
--gl-space-sm | 12px | --gl-radius-input | 14px |
--gl-space-md | 16px | --gl-radius-btn | 16px |
--gl-space-lg | 20px | --gl-radius-card | 24px |
--gl-space-xl | 24px | --gl-radius-full | 9999px |
--gl-space-2xl | 32px | --gl-radius-pill | 50% |
Theming (Light / Dark)
The theme is controlled via data-theme on the <html> element.
// Theme per JavaScript wechseln:
function toggleTheme() {
const html = document.documentElement;
const current = html.getAttribute('data-theme');
html.setAttribute('data-theme',
current === 'dark' ? 'light' : 'dark'
);
}
Background
The glass effect requires a colored background.
| Class | Description |
|---|---|
.glass-bg | Full background with aurora light effects |
.glass-bg--has-tab-bar | Modifier: bottom padding for tab bar |
<div class="glass-bg glass-bg--has-tab-bar">
<!-- Inhalte -->
</div>
Pill-Buttons
Round icon buttons for navigation and actions.
| Class | Description |
|---|---|
.glass-pill | Standard glass circle (46×46px) |
.glass-theme-toggle | Pill with moon/sun icon switch |
Tab-Bar
Fixed bottom navigation with glass background and optional badge.
<nav class="glass-tab-bar">
<button class="glass-tab-bar__item is-active">
<span class="glass-tab-bar__icon"><!-- SVG --></span>
<span class="glass-tab-bar__label">Start</span>
</button>
<button class="glass-tab-bar__item">
<span class="glass-tab-bar__icon">
<!-- SVG -->
<span class="glass-tab-bar__badge">3</span>
</span>
<span class="glass-tab-bar__label">Contracts</span>
</button>
</nav>
Title
Capture Contracts
& Upload
<h1 class="glass-title">Seitentitel</h1>
Card
Photograph your document, verify edges, and upload in batch.
<div class="glass-card glass-card--glow">
<div class="glass-card__icon"><!-- SVG --></div>
<p class="glass-card__text">Text</p>
</div>
| Class | Description |
|---|---|
.glass-card | Base glass surface |
.glass-card--glow | Light → milky gradient + light streak |
.glass-card__icon | Centered icon wrapper |
.glass-card__text | Description text |
Buttons
| Class | Description |
|---|---|
.glass-btn | Base (56px, full width) |
--primary | Colored gradient |
--secondary | Milky white |
--tertiary | Subtle glass |
--sm | 44px height |
--lg | 64px height |
--auto | Auto width |
Badge
Standard
Aktiv
Fertig
Fehler
<span class="glass-badge glass-badge--primary">Aktiv</span>
Avatar
S
M
L
<div class="glass-avatar glass-avatar--lg">L</div>
Divider
<hr class="glass-divider">
Status Notice
No documents captured yet.
Modal
Controlled via .is-active class on the overlay.
| Class | Description |
|---|---|
.glass-modal-overlay | Fullscreen blur overlay |
.glass-modal-overlay.is-active | Visible + animated |
.glass-modal | Dialog container |
__header / __title | Title area |
__body | Content area |
__footer / __action | Action bar |
__action--primary | Primary action |
__action--danger | Dangerous action |
Toast
Visible via .is-visible. Variants: --success, --error, --warning.
<div class="glass-toast glass-toast--success">
<svg class="glass-toast__icon">...</svg>
<span class="glass-toast__text">Success!</span>
</div>
Input
Please enter a valid email address
<div class="glass-input-group">
<label class="glass-label">Label</label>
<input class="glass-input" type="text">
<span class="glass-hint">Help text</span>
</div>
Textarea
<textarea class="glass-textarea"></textarea>
Select
<select class="glass-select">
<option>Please select…</option>
</select>
Search
<div class="glass-search">
<svg class="glass-search__icon" viewBox="0 0 24 24">...</svg>
<input class="glass-input" type="search">
</div>
Toggle Switch
<label class="glass-toggle">
<input class="glass-toggle__input" type="checkbox">
<span class="glass-toggle__track">
<span class="glass-toggle__thumb"></span>
</span>
<span class="glass-toggle__label">Label</span>
</label>
Checkbox
Radio Button
Range Slider
75%
Progress Bar
Standard68%
Success100%
| Class | Description |
|---|---|
.glass-progress | Base container |
--sm / --lg | Track height: 4px / 12px |
--success / --error | Color variants |
Accordion
The detailed answer to this question.
The answer to question two.
Utilities
Stack (vertikal)
.gl-stack
.gl-stack--xs (8px)
.gl-stack--sm (12px)
.gl-stack--md (16px)
.gl-stack--lg (20px)
.gl-stack--xl (24px)
Row (horizontal)
.gl-row
.gl-row--xs (8px)
.gl-row--sm (12px)
.gl-row--md (16px)
Margin Top
.gl-mt-sm (12px)
.gl-mt-md (16px)
.gl-mt-lg (20px)
.gl-mt-xl (24px)
Margin Bottom
.gl-mb-sm (12px)
.gl-mb-md (16px)
.gl-mb-lg (20px)
.gl-mb-xl (24px)
Text
.gl-text-center
.gl-text-muted
.gl-text-sm
Layout
.gl-px (padding horizontal)
.gl-w-full (width: 100%)
.gl-flex-1 (flex: 1)
📋 All Classes at a Glance
| Component | Classes | Modifier / States |
|---|---|---|
| Background | .glass-bg | --has-tab-bar |
| Navigation | .glass-nav | – |
| Pill-Button | .glass-pill | – |
| Theme-Toggle | .glass-theme-toggle | – |
| Title | .glass-title | – |
| Card | .glass-card | --glow |
| Button | .glass-btn | --primary, --secondary, --tertiary, --sm, --lg, --auto |
| Badge | .glass-badge | --primary, --success, --error |
| Avatar | .glass-avatar | --sm, --lg |
| Divider | .glass-divider | – |
| Status | .glass-status | – |
| Input | .glass-input | --error, :disabled |
| Textarea | .glass-textarea | – |
| Select | .glass-select | – |
| Search | .glass-search | – |
| Toggle | .glass-toggle | :checked |
| Checkbox | .glass-checkbox | :checked |
| Radio | .glass-radio | :checked |
| Range | .glass-range | – |
| Progress | .glass-progress | --sm, --lg, --success, --error |
| Modal | .glass-modal-overlay | .is-active |
| Toast | .glass-toast | --success, --error, --warning, .is-visible |
| Tab-Bar | .glass-tab-bar | .is-active auf Items |
| Accordion | .glass-accordion | .is-open auf Items |