Über CSS-Glasmorphismus-Generator
Erstelle wunderschöne Glasmorphismus-UI-Effekte mit Live-Vorschau und CSS-Code-Export.
So verwenden Sie CSS-Glasmorphismus-Generator
- 1Passe den/die an blur amount to control how frosted the glass effect appears.
- 2Lege die Deckkraft und Rahmendecrkraft für die Glasschicht fest.
- 3Pick a Hintergrundfarbe and adjust saturation for the glass tint.
- 4Preview the effect on a sample card mit einem/einer colorful background behind it.
- 5Kopiere den/die/das CSS output and apply it to your elements.
Tipps
- Glasmorphismus funktioniert am besten auf farbenfrohen oder bildbasierten Hintergründen.
- Halte die Unschärfe zwischen 10-20px für den klassischen Milchglaseffekt — zu viel Unschärfe verliert den Glaseffekt.
- Teste auf Safari — backdrop-filter benötigt den -webkit-Präfix für vollständige browserübergreifende Unterstützung.
Kostenlos vs. kostenpflichtig
Kostenlos: alle Funktionen verfügbar.
Verwandte Tools
OneKitTools-TeamAktualisiert 2.21.4