Glassmorphism UI Library
Vollständige CSS-Komponentenbibliothek im Glasmorphism-Stil – entwickelt von der Jungherz GmbH. Reines CSS, keine Abhängigkeiten, Dark & Light Mode.
Installation
Eine CSS-Datei einbinden – fertig. Optional ein Theme-Override für andere Markenfarben.
<!-- Basis-Library -->
<link rel="stylesheet" href="glasskit.css">
<!-- Optional: Theme-Override -->
<link rel="stylesheet" href="theme-override.css">
<!-- Dark Mode (Standard) -->
<html data-theme="dark">
<!-- Light Mode -->
<html data-theme="light">
Design Tokens
Alle visuellen Werte werden ĂĽber CSS Custom Properties gesteuert.
Farbpalette
| Token | Dark-Wert | Verwendung |
|---|---|---|
--gl-color-primary | #f5a623 | Primärfarbe, Buttons, aktive Elemente |
--gl-color-primary-dark | #d4692a | Gradient-Endwert |
--gl-color-text | #ffffff | Standard-Textfarbe |
--gl-color-text-muted | rgba(255,255,255,0.60) | Sekundärer Text |
--gl-color-success | #34c759 | Erfolg-Status |
--gl-color-error | #ff3b30 | Fehler-Status |
Glasflächen
| Token | Wert | Verwendung |
|---|---|---|
--gl-surface-1 | rgba(…, 0.08) | Subtilste Fläche (Status) |
--gl-surface-2 | rgba(…, 0.10) | Standard (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) | Starker Hover |
--gl-surface-milk-strong | rgba(…, 0.75) | Secondary Button |
Spacing & Radii
| Token | Wert | Token | Wert |
|---|---|---|---|
--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)
Das Theme wird ĂĽber data-theme am <html>-Element gesteuert.
// Theme per JavaScript wechseln:
function toggleTheme() {
const html = document.documentElement;
const current = html.getAttribute('data-theme');
html.setAttribute('data-theme',
current === 'dark' ? 'light' : 'dark'
);
}
Hintergrund
Der Glaseffekt braucht einen farbigen Hintergrund.
| Klasse | Beschreibung |
|---|---|
.glass-bg | Vollständiger Hintergrund mit Aurora-Lichteffekten |
.glass-bg--has-tab-bar | Modifier: Padding unten fĂĽr Tab-Bar |
<div class="glass-bg glass-bg--has-tab-bar">
<!-- Inhalte -->
</div>
Pill-Buttons
Runde Icon-Buttons fĂĽr Navigation und Aktionen.
| Klasse | Beschreibung |
|---|---|
.glass-pill | Standard Glas-Kreis (46Ă—46px) |
.glass-theme-toggle | Pill mit Mond/Sonne-Icon-Switch |
Tab-Bar
Fixierte Bottom-Navigation mit Glas-Hintergrund und optionalem 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">Verträge</span>
</button>
</nav>
Titel
Verträge aufnehmen
& hochladen
<h1 class="glass-title">Seitentitel</h1>
Card
Vertrag fotografieren, Kanten prĂĽfen und gesammelt hochladen.
<div class="glass-card glass-card--glow">
<div class="glass-card__icon"><!-- SVG --></div>
<p class="glass-card__text">Text</p>
</div>
| Klasse | Beschreibung |
|---|---|
.glass-card | Basis-Glasfläche |
.glass-card--glow | Hell → milchig Verlauf + Lichtstreifen |
.glass-card__icon | Zentrierter Icon-Wrapper |
.glass-card__text | Beschreibungstext |
Buttons
| Klasse | Beschreibung |
|---|---|
.glass-btn | Basis (56px, volle Breite) |
--primary | Farbiger Gradient |
--secondary | Milchig-weiĂź |
--tertiary | Subtiles Glas |
--sm | 44px Höhe |
--lg | 64px Höhe |
--auto | Auto-Breite |
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-Hinweis
Noch keine Verträge vorhanden.
Modal
Steuerung ĂĽber .is-active Klasse auf dem Overlay.
| Klasse | Beschreibung |
|---|---|
.glass-modal-overlay | Fullscreen Blur-Overlay |
.glass-modal-overlay.is-active | Sichtbar + animiert |
.glass-modal | Dialog-Container |
__header / __title | Titel-Bereich |
__body | Inhaltsbereich |
__footer / __action | Aktionsleiste |
__action--primary | Primäre Aktion |
__action--danger | Gefährliche Aktion |
Toast
Sichtbar via .is-visible. Varianten: --success, --error, --warning.
<div class="glass-toast glass-toast--success">
<svg class="glass-toast__icon">...</svg>
<span class="glass-toast__text">Erfolgreich!</span>
</div>
Input
Bitte gĂĽltige E-Mail angeben
<div class="glass-input-group">
<label class="glass-label">Label</label>
<input class="glass-input" type="text">
<span class="glass-hint">Hilfetext</span>
</div>
Textarea
<textarea class="glass-textarea"></textarea>
Select
<select class="glass-select">
<option>Bitte wählen…</option>
</select>
Suchfeld
<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%
Erfolg100%
| Klasse | Beschreibung |
|---|---|
.glass-progress | Basis-Container |
--sm / --lg | Track-Höhe: 4px / 12px |
--success / --error | Farb-Varianten |
Accordion
Die ausfĂĽhrliche Antwort auf diese Frage.
Die Antwort auf Frage zwei.
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)
đź“‹ Alle Klassen auf einen Blick
| Komponente | Klassen | Modifier / States |
|---|---|---|
| Hintergrund | .glass-bg | --has-tab-bar |
| Navigation | .glass-nav | – |
| Pill-Button | .glass-pill | – |
| Theme-Toggle | .glass-theme-toggle | – |
| Titel | .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 | – |
| Suchfeld | .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 |