# 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. > Kanonische Seite: https://elysiatools.com/de/tools/glassmorphism-css-snippet-builder - **Kategorie:** Design - **Schlagwörter:** glassmorphism, neumorphismus, backdrop-filter, milchglas, css-generator, glaskarte ## Überblick 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. ## Eingaben - **Stil** (select) - **Hintergrund-Blur (px)** (number) - **Hintergrund-Sättigung (%)** (number) - **Glas-Tönungsfarbe** (color) - **Tönungsdeckkraft** (number) - **Eckenradius (px)** (number) - **Rahmenbreite (px, nur Glas)** (number) - **Rahmen-Deckkraft (nur Glas)** (number) - **Außenschatten-Deckkraft (nur Glas)** (number) - **Oberkanten-Highlight (inset)** (checkbox) - **Korn-/Noise-Overlay** (checkbox) - **@supports-Fallback** (checkbox) - **Neu-Hintergrundfarbe** (color) - **Neu-Schattenabstand (px)** (number) - **Gedrückter Zustand (inset)** (checkbox) - **Neu-Dunkelmodus** (checkbox) ## Wann verwenden - Wenn du eine halbtransparente Milchglaskarte über einem bunten oder fotografischen Hintergrund brauchst. - Wenn du Soft-UI-Flächen oder gedrückte Steuerelemente im Neumorphism-Stil mit passenden Doppel-Schatten erzeugen willst. - Wenn du produktionsreifen CSS-Code mit Browser-Präfix, Fallback und Tailwind-Zuordnung kopieren möchtest. ## Funktionsweise - Wähle den Stil Glassmorphism oder Neumorphismus und setze die sichtbaren Werte wie Blur in Pixel, Sättigung, Tönungsfarbe und -deckkraft sowie Eckenradius. - Passe glas-spezifische Rahmen- und Schattenwerte an oder bei Neumorphismus Hintergrundfarbe, Schattenabstand, gedrückten Inset-Zustand und Dunkelmodus. - Aktiviere optional Oberkanten-Highlight, Korn-Overlay und @supports-Fallback; der Generator schreibt automatisch -webkit-backdrop-filter und das Tailwind-Mapping. - Prüfe die Live-Vorschau der Karte und übernimm den fertigen HTML-/CSS-Snippet. ## Anwendungsfälle - Dashboard- oder Overlay-Karten mit Milchglas über Farbverläufen. - Weiche Soft-UI-Panels und gedrückte Neumorphism-Controls im Hell- oder Dunkelmodus. - Schnelles Erzeugen kopierbarer CSS- und Tailwind-Snippets für Landingpages. ## Häufig gestellte Fragen ### 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. ## Ähnliche Tools - [Audio-Melodiekontur-Extraktor](https://elysiatools.com/de/tools/audio-melody-contour-extractor): Extrahiert die dominante Melodie und bündelt MIDI, Notenereignisse, Tonhöhenkontur, SVG und JSON in einer ZIP-Datei. - [Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/de/tools/font-file-inspector): Lade eine TTF-, OTF-, WOFF- oder WOFF2-Datei hoch (WOFF2 wird automatisch dekomprimiert) und prüfe alle Metadaten: Familie/Subfamilie/Designer/Copyright/Version, Glyphenanzahl, unitsPerEm, Strichstärke und Breite, Kursivwinkel, Stilflags und Bounding-Box; Heatmap der Unicode-Blockabdeckung; SVG-Glyphenvorschau (eigener Text, Auto-Stichprobe für Icon-Fonts); liga-Ligaturen und OpenType-Features; fvar-Achsen und benannte Instanzen variabler Fonts. - [Ecken-Wasserzeichen-Tool](https://elysiatools.com/de/tools/image-watermark-corner): Fügen Sie Ecken-Wasserzeichen zu Bildern mit anpassbarer Positionierung, Größe, Transparenz und mehreren Ecken-Optionen hinzu - [Diagonales Wasserzeichen-Tool](https://elysiatools.com/de/tools/image-watermark-diagonal): Fügen Sie diagonale Wasserzeichen zu Bildern mit anpassbarem Winkel, Größe, Transparenz und Positionierung entlang der Diagonalen hinzu - [Bild-Wasserzeichen-Tool](https://elysiatools.com/de/tools/image-watermark-image): Fügen Sie Bild-Wasserzeichen zu Bildern mit anpassbarer Position, Größe, Transparenz und Rotation hinzu - [Wasserzeichen-Opazität-Tool](https://elysiatools.com/de/tools/image-watermark-opacity): Fügen Sie Wasserzeichen mit benutzerdefinierter Opazität zu Bildern hinzu, unterstützt Text- und Bildwasserzeichen mit erweiterten Opazitätskontrollen - [Wasserzeichen-Mosaik-Tool](https://elysiatools.com/de/tools/image-watermark-tile): Fügen Sie Mosaik-Wasserzeichen zu Bildern mit anpassbarer Größe, Transparenz, Abstand und Mustern hinzu - [SVG-Diagramm-Datenextraktor](https://elysiatools.com/de/tools/svg-chart-to-data-extractor): Extrahiert Datenpunkte aus SVG-Linien-, Balken- und Kreisdiagramm-Strukturen nach JSON oder CSV ## Beispiele - [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren - [Tailwind CSS Samples](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster ## Verwandte Inhalte - [SVG-, Favicon- und Icon-Workflow-Tools](https://elysiatools.com/de/hubs/svg-favicon-icon-workflows): Erstellen Sie Favicon-Pakete, optimieren Sie SVGs, konvertieren Sie Icons zwischen ICO, PNG, JPG, WebP und SVG und bereiten Sie webfertige Assets in einem Hub vor. - [Tools fur Audio-Encoding und Formatkonvertierung](https://elysiatools.com/de/hubs/audio-convert): Vergleiche Audioformat-Konvertierung, Bitratenanderungen, Abtastraten-Konvertierung, Codec-Wechsel und Export-Tools in einem Hub. - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [Tools fur JSON-Austausch und Format-Ubersetzung](https://elysiatools.com/de/hubs/json-convert): Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub.