CSS-Glassmorphismus-Generator
Führung
CSS-Glassmorphismus-Generator
Erstellen Sie beeindruckende Milchglaseffekte mit einem Live-Visual-Editor. Passen Sie Hintergrundunschärfe, Hintergrundtransparenz, Randdeckkraft, Radius und Schatten in Echtzeit an und sehen Sie das Ergebnis sofort auf einer bunten Vorschau. Kopieren Sie das generierte CSS oder ein vollständiges HTML+CSS-Snippet, bereit für Ihr Projekt, mit Herstellerpräfixen für browserübergreifende Unterstützung.
Nutzung
Verwenden Sie die Schieberegler, um die Glassmorphismus-Eigenschaften anzupassen: Hintergrundunschärfe steuert die Intensität des Milchglases, Hintergrundfarbe und Alpha bestimmen den Farbton, und Ränder sorgen für einen dezenten Glasrand. Wählen Sie aus 6 Farbverlauf-Hintergründen und schalten Sie schwebende Formen ein, um zu sehen, wie die Unschärfe mit dem Inhalt hinter der Glas-Karte interagiert. Wählen Sie eine Voreinstellung wie Subtiles Glas oder Dunkles Glas als schnellen Ausgangspunkt und verfeinern Sie dann die Details. Kopieren Sie das CSS oder das vollständige HTML+CSS-Snippet, wenn Sie mit dem Ergebnis zufrieden sind.
Funktionen
- Live-Vorschau – Sehen Sie, wie sich der Glassmorphismus-Effekt in Echtzeit aktualisiert, während Sie eine beliebige Steuerung anpassen
- Hintergrundunschärfe-Steuerung – Schieberegler von 0 bis 40px zur Einstellung der Milchglas-Intensität
- RGBA-Hintergrund – Farbwähler mit separatem Deckkraft-Schieberegler für präzise Transparenzkontrolle
- Rand- & Schattensteuerung – Passen Sie die Randbreite, -farbe, -deckkraft, den -radius und den optionalen Box-Schatten an
- Verlaufshintergründe – 6 bunte Verlaufsvoreinstellungen mit optionalen schwebenden Formen zur Demonstration des Unschärfeeffekts
- Style Presets – Ein-Klick-Voreinstellungen: Subtiles Glas, Milchglas, Dunkles Glas und Buntes Glas
- Hersteller-Präfixe – Generiertes CSS enthält -webkit-backdrop-filter für Safari-Kompatibilität
- CSS oder HTML+CSS kopieren – Erhalten Sie nur die CSS-Eigenschaften oder ein vollständiges Karten-Snippet, das zum Einfügen bereit ist
Häufig gestellte Fragen
-
Was ist Glassmorphismus in CSS?
Glassmorphismus ist ein UI-Design-Trend, der ein Milchglas-Erscheinungsbild mithilfe von CSS backdrop-filter mit Weichzeichner in Kombination mit einer halbtransparenten Hintergrundfarbe erzeugt. Der Weichzeichner lässt den Inhalt hinter dem Element weich und diffus erscheinen, während der transparente Hintergrund einen Farbton hinzufügt. Beliebt gemacht durch Apples macOS Big Sur und Windows 11 Fluent Design, erzeugt Glassmorphismus Tiefe und visuelle Hierarchie, indem er Hintergrundelemente teilweise durchscheinen lässt. Die wichtigsten CSS-Eigenschaften sind backdrop-filter: blur(), background: rgba() und typischerweise ein dezenter Rand zur Hervorhebung der Glaskante.
-
Welche Browser unterstützen backdrop-filter?
Backdrop-filter wird in Chrome 76 und neuer, Safari 9 und neuer (mit -webkit-Präfix), Edge 79 und neuer, Firefox 103 und neuer sowie allen modernen mobilen Browsern unterstützt. Safari benötigt das Präfix -webkit-backdrop-filter, das dieser Generator automatisch einfügt. Die einzige nennenswerte Lücke sind ältere Firefox-Versionen vor 103 und Internet Explorer, der keine Unterstützung bietet. Für nicht unterstützte Browser bietet die halbtransparente Hintergrundfarbe weiterhin einen getönten Überlagerungseffekt, nur ohne die Unschärfe. Die allgemeine Browserunterstützung liegt per 2026 bei über 95 Prozent der globalen Nutzer.
-
Wie unterscheidet sich backdrop-filter von filter in CSS?
Die CSS-filter-Eigenschaft wendet visuelle Effekte wie Unschärfe auf das Element selbst und seine Kinder an. Backdrop-filter wendet dieselben Effekte nur auf den Bereich hinter dem Element an, wodurch der Inhalt des Elements scharf und lesbar bleibt. Dies erzeugt den Glassmorphismus-Effekt: Text auf der Glas-Karte bleibt scharf, während der Hintergrund dahinter unscharf erscheint. Wenn Sie stattdessen filter: blur() verwenden würden, würde auch der Text in der Karte unscharf und unleserlich werden. Backdrop-filter erzeugt im Wesentlichen einen Fenstereffekt, durch den Sie durch Milchglas schauen.
-
Was macht ein gutes Glassmorphismus-Design aus?
Effektiver Glassmorphismus benötigt einen farbenfrohen oder detailreichen Hintergrund, um die Unschärfe sichtbar zu machen. Ein einfarbiger weißer Hintergrund hinter Glas sieht identisch aus wie eine normale Karte. Verwenden Sie in den meisten Fällen Unschärfewerte zwischen 8 und 20 Pixel. Halten Sie die Hintergrunddeckkraft zwischen 10 und 30 Prozent, damit der Inhalt dahinter teilweise sichtbar bleibt. Fügen Sie einen dezenten hellen Rand mit 10 bis 30 Prozent weißer Deckkraft hinzu, um die Glaskante hervorzuheben. Vermeiden Sie das Stapeln mehrerer Glasschichten, da jeder backdrop-filter die Leistungskosten erhöht. Stellen Sie sicher, dass der Textkontrast den Zugänglichkeitsstandards entspricht, da halbtransparente Hintergründe die Lesbarkeit beeinträchtigen können.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug hinzugefügt am 18. April 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
