Glassmorphismus-Generator
Stellen Sie eine Milchglaskarte ein – Unschärfe, Tönung, Rand-Highlight, Eckenradius und Schatten – mit einer Vorschau auf einem echt animierten Hintergrund, sodass die Unschärfequalität in Bewegung sichtbar ist.
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
backdrop-filter: blur() ist die CSS-Eigenschaft hinter dem Milchglas-Look – eine durchscheinende Fläche, die alles, was sich dahinter bewegt, weichzeichnet, statt nur eine flache Farbe zu überblenden. Der Haken: Die Unschärfequalität ist auf einer statischen Farbfläche kaum zu beurteilen; sie wirkt erst überzeugend, wenn sich wirklich etwas darunter bewegt, so wie auf einer echten Seite mit Inhalten, Videos oder einem animierten Hero. Dieser Generator platziert die Vorschaukarte über einem echt animierten statt einem statischen Hintergrund, sodass das, was Sie beim Ziehen der Regler sehen, dem entspricht, was Besucher tatsächlich erleben.
Der Hintergrund ist eine echte CSS-Animation: ein großer linear-gradient, gemalt auf 400 % der Elementgröße, dessen background-position über @keyframes in einer Schleife hin- und herbewegt wird – keine JavaScript-Animationsschleife, kein Canvas, nur dieselbe kontinuierliche background-position-Technik, die in produktiven Hero-Sektionen zum Einsatz kommt. Unschärfe, Tönungsfarbe und -deckkraft, Rand-Highlight-Farbe/-Deckkraft/-Breite, Eckenradius und Schattenweichheit beeinflussen alle den Live-Stil der schwebenden Karte, und das kopierbare CSS-Feld spiegelt exakt dieselben Werte wider.
Nicht jeder Browser unterstützt backdrop-filter, daher erzeugt der Generator auch einen echten @supports not (backdrop-filter: blur(1px))-Block – keine symbolische Geste, sondern eine Fallback-Regel mit einer eigenen Hintergrundfarbe, die aus Ihrer tatsächlichen Tönungsdeckkraft berechnet wird. Weil Transluzenz ohne Unschärfe merklich schlechter aussieht (alles Dahinterliegende scheint unverwischt durch), erhöht das Fallback automatisch den Alpha-Kanal über Ihre gewählte Tönungsdeckkraft, 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 gut aussieht, wenden Sie es auf ein beliebiges Element über einem Foto, Video oder Farbverlauf an, und behalten Sie den @supports-Block bei, damit ältere Browser immer noch eine lesbare, deckendere Karte erhalten statt einer kaum sichtbaren.