Was erzeugt der Generator genau?

Einen kompletten CSS-Snippet inkl. backdrop-filter, Tönung, Schatten, optionalem ::before-Korn, @supports-Fallback, -webkit-Präfix und Tailwind-Klassen plus Live-Vorschau.

Warum gibt es ein -webkit-Präfix?

Safari benötigt -webkit-backdrop-filter bis Version 17.x; ab Safari 18 und Firefox 103 reicht die unpräfixierte Eigenschaft. Der Snippet schreibt beide Deklarationen.

Was macht das @supports-Fallback?

Fehlt backdrop-filter, fällt der Stil auf eine nahezu opake Tönungsfarbe zurück, damit die Karte lesbar bleibt.

Wie unterscheidet sich Neumorphismus von Glassmorphism?

Neumorphismus nutzt dieselbe Fläche wie der Seitenhintergrund plus dunklen Schatten unten-rechts und hellen oben-links; Inset wirkt gedrückt. Glassmorphism arbeitet mit Blur, Sättigung und transparenter Tönung.

Werden Tailwind-Klassen mitgeliefert?

Ja. Der Mapping nutzt benannte Utilities wo möglich und Arbitrary Values für exakte Pixel; ein Hinweis markiert die v3/v4-Änderung bei blur-sm.

Elysia Tools

Mobile Navigation

Design

Glassmorphism-/Neumorphism-CSS-Snippet-Generator

Erzeugt den vollständigen Glassmorphism- oder Neumorphism-CSS-Snippet von Anfang bis Ende: Blur, Sättigung, Tönungsdeckkraft, Radius, Rahmen, Außenschatten und Oberkanten-Highlight; optional SVG-feTurbulence-Korn und @supports-Fallback; automatisch mit -webkit-backdrop-filter-Präfix (vor Safari 18 nötig) und Tailwind-Klassen-Mapping (mit v3/v4-Hinweis), plus Live-Vorschau der Karte auf Gradient-Hintergrund.

Einzelheiten

Wobei dieses Tool hilft

Verifizierte Konstanten (Aug. 2026): css.glass-Klassiker (rgba(255,255,255,.2), blur(5px), Radius 16px, Schatten 0 4px 30px); 2025er-Best-Practice (blur(12px) saturate(160%), Schatten 0 8px 32px rgba(0,0,0,.12) + oberes Inset). backdrop-filter: 95,69 % (caniuse); Safari braucht -webkit- bis 17.x, ab 18 ohne; Firefox ab 103. Korn: feTurbulence fractalNoise als Data-URI auf ::before (0,05–0,15); @supports fällt auf fast-opakes rgba zurück. Tailwind: backdrop-blur-xl=24px, backdrop-saturate-150, rounded-2xl=16px; v4 verschob blur-sm von 4 auf 8px — exakte Werte via backdrop-blur-[12px]. Neumorphismus (neumorphism.io): Fläche wie Seitenhintergrund, dunkler Schatten unten-rechts + heller oben-links, inset = gedrückt, Dunkelmodus mit hellem Schatten 0,03–0,1; Schatten zählen nicht zum Kontrast — nicht für interaktive Steuerelemente.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Best-Practice-Milchglaskarte (Blur 12 / Saturate 160)

2025er-Komposition: blur(12px) saturate(160%), weiße Tönung 0,15, 16px-Radius, Rahmen 0,25, mehrschichtiger Schatten mit Oberkanten-Highlight, Korn und @supports-Fallback, plus Tailwind-Mapping mit v4-Hinweis.

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

Dunkles Neumorphism-Control im gedrückten (Inset-)Zustand

Neumorphism-Oberfläche im Dunkelmodus (#2d2d2d) mit Inset-Schatten für den gedrückten Zustand, heller Schatten auf 0,06 gedimmt — der Tailwind-Output nutzt Arbitrary-Shadow-Werte.

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

Eingaben

Optionen sind gruppiert, damit lange Formulare übersichtlich bleiben.

16 Optionen

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.11

StilselectOptionales FeldHintergrund-Blur (px)numberOptionales FeldHintergrund-Sättigung (%)numberOptionales FeldGlas-TönungsfarbecolorOptionales FeldTönungsdeckkraftnumberOptionales FeldEckenradius (px)numberOptionales FeldRahmenbreite (px, nur Glas)numberOptionales FeldRahmen-Deckkraft (nur Glas)numberOptionales FeldAußenschatten-Deckkraft (nur Glas)numberOptionales FeldNeu-HintergrundfarbecolorOptionales FeldNeu-Schattenabstand (px)numberOptionales Feld

SchalterOptionales Verhalten aktivieren oder deaktivieren.5

Oberkanten-Highlight (inset)checkboxOptionales FeldAktiviert, wenn ausgewähltKorn-/Noise-OverlaycheckboxOptionales FeldAktiviert, wenn ausgewählt@supports-FallbackcheckboxOptionales FeldAktiviert, wenn ausgewähltGedrückter Zustand (inset)checkboxOptionales FeldAktiviert, wenn ausgewähltNeu-DunkelmoduscheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Glassmorphism-/Neumorphism-CSS-Snippet-Generator

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Best-Practice-Milchglaskarte

2. Dunkles Neumorphism-Control gedrückt

FAQ

SVG Beispiele

Tailwind CSS Samples

Web Python Bildverarbeitung Beispiele

Bulma CSS Framework Beispiele

Audio-Melodiekontur-Extraktor

Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)

Ecken-Wasserzeichen-Tool

Diagonales Wasserzeichen-Tool

SVG-, Favicon- und Icon-Workflow-Tools

Tools fur Audio-Encoding und Formatkonvertierung

Tools fur Bildformat-Konvertierung und animierten Export

Tools fur JSON-Austausch und Format-Ubersetzung