Glasmorphismus-Generator

Hintergrundfilter: Blur() ist die CSS-Eigenschaft hinter dem Milchglas-Look – einem durchscheinenden Panel, das alles, was sich dahinter bewegt, verwischt, anstatt nur eine flache Farbe auszubleichen. Der Haken daran ist, dass sich die Qualität der Unschärfe kaum anhand eines statischen Musters beurteilen lässt; Es wirkt erst dann überzeugend, wenn sich darunter tatsächlich etwas bewegt, wie es auf einer echten Seite mit Inhalt, Video oder einem animierten Helden der Fall ist. Dieser Generator legt die Vorschaukarte über einen wirklich animierten Hintergrund statt über einen unbewegten Hintergrund, sodass Sie beim Ziehen der Schieberegler das sehen, was die Besucher tatsächlich erleben.

Der Hintergrund ist eine echte CSS-Animation: ein großer linearer Farbverlauf mit 400 % der Elementgröße, wobei @keyframes seine Hintergrundposition in einer Schleife hin und her verschiebt – keine JavaScript-Animationsschleife, keine Leinwand, nur die gleiche kontinuierliche Hintergrundpositionstechnik, die in Produktions-Hero-Abschnitten verwendet wird. Unschärfe, Tönungsfarbe und Deckkraft, Randhervorhebungsfarbe/Deckkraft/Breite, Eckenradius und Schattenweichheit bestimmen alle die Live-Stile der schwebenden Karte, und das kopierbare CSS-Feld spiegelt genau dieselben Werte wider.

Nicht jeder Browser unterstützt den Hintergrundfilter, daher gibt der Generator auch einen echten @supports not (backdrop-filter: Blur(1px))-Block aus – keine Token-Geste, sondern eine Fallback-Regel mit einer eigenen Hintergrundfarbe, die aus Ihrer tatsächlichen Farbtondeckkraft berechnet wird. Da die Durchsichtigkeit ohne Unschärfe merklich schlechter aussieht (was auch immer sich dahinter verbirgt, wird unverwischt durchscheint), hebt der Fallback den Alpha-Kanal automatisch über die von Ihnen gewählte Tönungs-Deckkraft an, und ein Kommentar im generierten CSS erklärt genau, warum und um wie viel.

Alles wird in Ihrem eigenen Browser berechnet und gerendert: kein Upload, kein Konto, kein Server-Roundtrip. Kopieren Sie das CSS, sobald die Karte richtig aussieht, legen Sie es auf einem beliebigen Element ab, das über einem Foto, Video oder Farbverlauf platziert werden soll, und behalten Sie den @supports-Block bei, damit ältere Browser immer noch eine lesbare, undurchsichtigere Karte statt einer kaum sichtbaren Karte erhalten.