Glassmorphism-Card-Generator
Milchglas-Karten per Blur und Transparenz gestalten und das CSS direkt kopieren
Mit Schiebereglern für Hintergrund-Blur, Transparenz, Sättigung, Rahmen und Schatten gestalten Sie Karten im Milchglas-Look und sehen das Ergebnis in einer Live-Vorschau. Webdesignerinnen und Frontend-Entwickler können so UI-Komponenten im Glassmorphism-Stil schnell durchspielen und den fertigen CSS-Code direkt übernehmen. Berechnung und Vorschau laufen vollständig im Browser – es werden keinerlei Daten an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie eine der sechs Verlaufs-Voreinstellungen für den Hintergrund.
- Stellen Sie Unschärfe, Deckkraft des Hintergrunds, Sättigung, Eckenrundung, Rahmenstärke und -deckkraft sowie den Innenabstand über die Schieberegler ein.
- Legen Sie mit dem Farbwähler den Farbton der Karte fest und aktivieren Sie bei Bedarf den Schatten.
- Wenn die Vorschau passt, übernehmen Sie den CSS-Code unten über die Schaltfläche zum Kopieren.
FAQ
- In welchen Browsern wird das erzeugte CSS korrekt dargestellt?
- Es funktioniert in aktuellen Versionen von Chrome, Edge, Safari und Firefox, die backdrop-filter unterstützen. Für Safari wird zusätzlich das Präfix -webkit-backdrop-filter mit ausgegeben.
- Die Karte wirkt nur milchig, der Glaseffekt kommt nicht zur Geltung.
- backdrop-filter macht das unscharf, was hinter der Karte liegt. Der Glaseffekt entsteht deshalb erst, wenn sich dahinter ein kontrastreicher Hintergrund mit Farben oder einem Bild befindet.
- Darf ich das erzeugte CSS unverändert in echten Projekten einsetzen?
- Ja, Sie können den kopierten Code ohne Lizenzhinweis frei in Ihren Projekten verwenden.