Deutsch
Entwirf Glas- und Neumorphismus-CSS-Oberflächen mit Live-Vorschau.
Zuletzt aktualisiert
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* und *Neumorphism* sind zwei Oberflächenstile, denen man im modernen Webdesign überall begegnet. **Glas** ist der Frostglas-Look — eine durchscheinende Karte, die den Hintergrund verschwimmen lässt, oft über bunten Gradienten oder Fotos. **Neumorphism** ist der Weich-Plastik-Look — eine Karte, die durch gepaarte helle und dunkle Schatten im Farbton des Hintergrunds aus der Fläche herauszutreten (oder einzusinken) scheint.
Beide Effekte sind reines CSS — keine Bilder, kein JavaScript, keine Bibliotheken. Glas stützt sich auf backdrop-filter: blur(), einen halbtransparenten Hintergrund und einen dünnen Rand. Neumorphism entsteht aus einem Paar box-shadow-Deklarationen: eine etwas dunkler als die Oberfläche, eine etwas heller, in gegenläufigen Richtungen. Die Mathematik ist kurz, das händische Justieren, bis alles passt, dauert aber. Ein Generator überspringt diesen Schritt.
Dieses Tool bietet Slider für jeden relevanten Parameter, eine Vorschau auf einem konfigurierbaren Hintergrund (damit der Glaseffekt etwas zum Brechen hat) und Ein-Klick-Kopie des CSS. Alles läuft im Browser — Snippet direkt ins Stylesheet einfügen.
backdrop-filter ist die Eigenschaft hinter Glassmorphism — sie verschwimmt und sättigt das, was *hinter* dem Element liegt, nicht das Element selbst.rgba(...) mit niedrigem Alpha) und einen dünnen hellen Rand, um wie echter Frost zu wirken; entfernst du eines, fällt der Effekt zusammen.box-shadow-Deklarationen, nicht eine: einen dunkleren Schatten unten-rechts und ein helleres Highlight oben-links — beide im Farbton der Oberfläche, nicht in reinem Schwarz/Weiß.Oben zwischen **Glas** und **Neumorphism** wechseln. Glas braucht einen Hintergrund; Neumorphism sitzt auf einer flachen Oberflächenfarbe deiner Wahl.
Bei Glas zählen *Blur* (wie stark der Hintergrund verwischt), *Hintergrund-Opazität* (wie durchscheinend die Karte) und *Tint* (leichter Farbstich). Bei Neumorphism zählen *Distanz* (Schattenversatz), *Blur* (Weichheit) und *Intensität* (Abstand zwischen Hell-/Dunkelpartner und Oberfläche).
Glas wirkt auf knackigen Gradienten oder Fotos. Neumorphism wirkt auf weichen, fast neutralen Tönen (#e0e5ec ist das kanonische Neumorphic-Grau). Das Tool bietet anklickbare Presets.
Drei Varianten: **Erhaben**, **Flach** (gleiche Schatten ohne Gradient) und **Inset** (eingedrückt). Probiere alle drei — gleiche Schattenmathematik, nur die Richtung ändert sich.
**Kopieren** klicken und Snippet ins Stylesheet einfügen. Die Ausgabe ist produktionsreif: -webkit-backdrop-filter für ältere Safaris, geordnete Properties und passender border-radius enthalten.
Die Eigenschaften, auf die jeder Effekt sich wirklich stützt. Volle Referenz auf MDN backdrop-filter und box-shadow.
| Stil | Kerneigenschaften | Was justieren | Notizen |
|---|---|---|---|
| Glas | backdrop-filter, halbtransparenter background, dünner border | Blur, Sättigung, Alpha | Immer -webkit-backdrop-filter für Safari ergänzen |
| Neumorphism (erhaben) | Zwei box-shadow + linearer Gradient | Distanz, Blur, Hell-/Dunkel-Intensität | Schattenfarben folgen dem Oberflächenton, nicht reinem Schwarz/Weiß |
| Neumorphism (inset) | Zwei inset-box-shadow | Gleiche Regler wie erhaben | Inset wirkt wie gedrückter Button oder versenkter Input |
| Kombiniert / hybrid | Glas über neumorphischer Platte | Vorsichtig stapeln — zu viele Filter killen Performance | Auf Dashboards üblich: neumorphische Karte, Glas-Header |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Klassisches Glassmorphism. saturate(180%) legt einen Hauch lebhafter Farbe hinter den Blur — ohne wirkt Frostglas blass. Setze das auf einen Hero-Gradient oder ein Foto.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Die beiden Schatten machen die Arbeit: dunkler unten-rechts, hellerer Glanzpunkt oben-links. Der Gradient liefert das subtile Reflektieren, das das Auge als "Plastik" liest.
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Setze inset auf beide Schatten und die Karte wirkt eingedrückt statt erhaben — perfekt für Inputs und Toggle-Hintergründe.
-webkit-backdrop-filter vergessen. Ältere Safaris (und eingebettete WebViews) ignorieren backdrop-filter ohne Präfix und dein Glas wird ein massiver Block.backdrop-filter das Präfix -webkit-backdrop-filter. Dieser Generator emittiert beide. Ohne Präfix fallen ältere Safaris und iOS-WebViews auf die opake background-Farbe zurück und der Glaseffekt verschwindet.aria-label auf Icon-Buttons — und vermeide es für Elemente, die *auffallen* müssen (Fehler, primäre CTAs).backdrop-filter wird in allen Evergreen-Browsern unterstützt. box-shadow ist universell. Achte auf Performance — backdrop-filter ist eine Per-Frame-GPU-Operation, halte die Anzahl Glaslayer pro Screen klein.