background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Der CSS-Glasmorphosis-Generator ist ein visueller Editor für den Frostglas-UI-Stil, bei dem eine durchscheinende Oberfläche alles verwischt, was sich dahinter befindet. Sie passen die Unschärfe des Hintergrunds, die Transparenz, die Sättigung, die Farbtonfarbe und den Eckenradius mit Schiebereglern an, sehen sich eine Vorschau-Aktualisierung über einem farbenfrohen Hintergrund an und kopieren die genauen CSS-Dateien.
Der Glasmorphismus beruht auf der Eigenschaft des Hintergrundfilters, die den Inhalt hinter einem Element und nicht auf das Element selbst verwischt. In Kombination mit einem halbtransparenten Hintergrund, einem Haarrand und einem weichen Schatten erzeugt es den von modernen Betriebssystemen populären Glaslook. Die richtige Balance von Hand zu finden ist fummelig, daher verwaltet dieses Tool jeden Wert und gibt einen sauberen, kopierbaren Block aus.
Alles läuft in Ihrem Browser. Wählen Sie ein Preset wie Frosted, Dark oder Vibrant, stimmen Sie die Schieberegler ab und kopieren Sie das CSS - einschließlich des mit dem Präfix -Webkit-Präfix-Backdrop-Filter für eine breitere Unterstützung. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.
Beginnen Sie mit gefrosteten, hellen, dunklen, lebendigen oder subtilen, um ein ausgewogenes Glas-Look zu erhalten, und verfeinern Sie es dann, um es Ihrem Design anzupassen.
Ziehen Sie die Schieberegler für die Hintergrundunschärfe, Transparenz und Sättigung, wählen Sie eine Farbtöne aus und legen Sie den Eckenradius fest. Die Vorschau wird live über einen farbenfrohen Hintergrund aktualisiert, sodass die Unschärfe sichtbar ist.
Schalten Sie den Haarrand ein oder aus. Ein subtiler transluzent-weißer Rand von 1 Pixel verkauft die Glaskante, insbesondere auf dunkleren Hintergründen.
Kopieren Sie den generierten Block — Hintergrund, Hintergrundfilter (mit -webkit- Präfix), Rand-Radius, Rand und Schatten – und fügen Sie ihn auf Ihre Karte oder das Panel ein.
Ein dedizierter Unschärfe-Slider treibt den Hintergrundfilter an, der alles, was sich hinter dem Element befindet, frostet - der Kern des Glaseffekts
Transparenz, Sättigung, Farbton, Eckenradius und ein optionaler Haarrand lassen sich in der exakten Glasoptik wählen
Die Vorschau befindet sich über einem farbenfrohen Farbverlauf, sodass Sie die Hintergrundunschärfe tatsächlich sehen können, während Sie sie bearbeiten
Die Ausgabe enthält sowohl Backdrop-Filter als auch das Präfix -webkit-backdrop-filter, sodass der Effekt für Safari und andere Webkit-Browser funktioniert
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!