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);Was ist der CSS-Glasmorphose-Generator?
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 eine Voreinstellung wie Frosted, Dark oder Vibrant, verfeinern Sie die Schieberegler und kopieren Sie das CSS - einschließlich des Hintergrundfilters mit dem Webkit-Präfix für breitere Unterstützung Kein Konto, keine Uploads, und es funktioniert offline weiter, sobald die Seite geladen wurde.
Der Effekt hängt davon ab, dass zwei Eigenschaften zusammenarbeiten, und er versagt lautlos, wenn einer fehlt, Backdrop-Filter verwischt, was auch immer hinter dem Element sitzt, also braucht er eine teilweise transparente Hintergrundfarbe, um durchzuzeigen: Bei voller Opazität gibt es nichts zu sehen, und ohne Hintergrund verschwindet die Oberfläche Es braucht auch etwas Unschärfbares dahinter, weshalb der Effekt wie eine flache Platte über einem einfachen Hintergrund aussieht und über einem Foto lebendig wird Zwei praktische Kosten. Backdrop-Unschärfe ist eines der teureren Dinge, die zusammengesetzt werden müssen, insbesondere über eine große Fläche oder beim Scrollen. Und Text auf einer durchscheinenden Oberfläche hat ein Kontrastverhältnis, das sich mit den darunter liegenden Durchgängen ändert, sodass er eine Kontrastprüfung vor einem Hintergrund bestehen und vor einem anderen scheitern kann.
Wie verwende ich den CSS-Glasmorphismus-Generator?
Wählen Sie eine Voreinstellung
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.
Stimmen Sie das Glas
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.
Umschalten der Grenze
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 das CSS
Kopieren Sie den generierten Block - Hintergrund, Hintergrundfilter (mit -webkit-Präfix), Randradius, Rand und Schatten - und fügen Sie ihn auf Ihre Karte oder Ihr Panel ein.
Hauptmerkmale
Hintergrund-Unschärfesteuerung
Ein spezieller Unschärferegler treibt den Hintergrundfilter an, der alles einfriert, was sich hinter dem Element befindet - den Kern des Glaseffekts
Volles Oberflächen-Styling
Transparenz, Sättigung, Farbton, Eckenradius und ein optionaler Haarrand lassen sich in der exakten Glasoptik wählen
Live-Vorschau
Die Vorschau befindet sich über einem farbenfrohen Farbverlauf, sodass Sie die Hintergrundunschärfe tatsächlich sehen können, während Sie sie bearbeiten
Vorausgang
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
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!