CSS-Glasmorphismus-Generator – Milchglas-Effekt
Transparenz, Weichzeichner (backdrop-filter) und Rahmenglanz per Schieberegler einstellen und sofort CSS für den Milchglas-Look erhalten
Erstelle den angesagten Glasmorphismus-Look mit Reglern für Transparenz, Weichzeichnung und Eckenradius – der fertige CSS-Code steht sofort zum Kopieren bereit.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Transparenz, Weichzeichnung und Rahmenwerte per Schieberegler anpassen.
- Live-Vorschau der Glaskarte prüfen und den CSS-Code kopieren.
FAQ
- Funktioniert das auch in älteren Browsern?
- Die meisten aktuellen Browser unterstützen den Effekt, und für Safari wird automatisch das Präfix `-webkit-backdrop-filter` mitgeliefert.
- Bremst backdrop-filter das Scrollen aus?
- Ein großer Weichzeichner-Radius kostet mehr GPU-Leistung – bei mehreren übereinanderliegenden Glaskarten empfehlen wir daher einen Wert unter 20px.
- Kann ich das in einem Tailwind-Projekt einsetzen?
- Die Ausgabe ist reines CSS, das du direkt in eine eigene Klasse einfügen oder in Tailwind-Utilities wie backdrop-blur und bg-opacity übersetzen kannst.