Glasmorphismus-Karten-Generator
Milchglas-Karten per Regler gestalten und CSS kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool stellst du Unschärfe, Deckkraft, Sättigung, Rahmen und Schatten per Schieberegler ein und siehst eine Milchglas-Karte in Echtzeit als Vorschau. Praktisch für Webdesigner und Frontend-Entwickler, die schnell eine Glasmorphismus-UI-Komponente entwerfen und den fertigen CSS-Code übernehmen möchten. Alles läuft direkt im Browser, es werden keine Daten an einen Server gesendet.
Anleitung
- Wähle eine der sechs Verlaufshintergrund-Vorlagen aus.
- Passe Unschärfe, Hintergrund-Opazität, Sättigung, Eckenradius, Randbreite/-opazität und Innenabstand per Regler an.
- Lege mit dem Farbwähler den Farbton der Karte fest und aktiviere bei Bedarf den Schatten.
- Wenn die Vorschau passt, kopiere den generierten CSS-Code über die Schaltfläche unten.
FAQ
- In welchen Browsern funktioniert der generierte CSS-Code?
- Er funktioniert in aktuellen Versionen von Chrome, Edge, Safari und Firefox, die backdrop-filter unterstützen. Für Safari wird zusätzlich -webkit-backdrop-filter erzeugt.
- Die Karte wirkt nur unscharf, nicht wie Glas – warum?
- backdrop-filter macht nur das unscharf, was sich hinter der Karte befindet. Für den Glaseffekt braucht es einen farbigen Hintergrund oder ein Bild dahinter.
- Darf ich das generierte CSS in eigenen Projekten verwenden?
- Ja, du kannst den CSS-Code ohne Quellenangabe frei in eigenen Projekten verwenden.