Was ist Glasmorphie? Wie entsteht im Hintergrundfilter mattiertes Glas in CSS

Frosted Glass Panels sind überall im Interface Design: Die durchscheinende Sidebar auf einem Desktop-Betriebssystem, der unscharfe Header, der ein Foto durchscheinen lässt, die Karte, die auf einer Landingpage über einen Farbverlauf schwebt, der Look ist einfach zu beschreiben und seltsamerweise leicht falsch zu machen, in CSS landet ein Panel flach und grau, oder die Unschärfe tut nichts, oder der weiße Text darauf ist über den halben Hintergrund unlesbar.

In diesem Leitfaden wird das CSS erläutert, das den Effekt zum Laufen bringt, warum jede der fünf Eigenschaften vorhanden ist, wie man Text lesbar hält, wenn sich der Hintergrund ständig ändert, was er beim Rendern der Leistung kostet und wie man anmutig zurückfällt Die bearbeiteten Beispiele verwenden die Ausgabe des Toolz Glasmorphie CSS Generator, die den Code aus Schiebereglern und einer Live-Vorschau erstellt.

tl; dr: Glassmorphism ist ein UI-Stil, bei dem eine Platte wie Milchglas aussieht: ein halbtransparenter Hintergrund plus backdrop-filter: blur() So zeigt sich der Inhalt dahinter weich durch, meist mit einem 1 px durchscheinenden Rand und einem weichen Schatten abgeschlossen, es braucht zwei Dinge, um sichtbar zu sein: eine Füllung, die teilweise transparent ist und etwas Buntes hinter dem Panel Textkontrast ändert sich mit allem, was darunter hindurchgeht, also testen Sie es vor den hellsten und dunkelsten Stellen des realen Hintergrunds Die CSS-Glasmorphiengenerator Schreibt den vollständigen Block, einschließlich der -webkit- Präfix, clientseitig, kostenlos, keine Anmeldung.

Was ist Glasmorphismus in CSS?

Glassmorphism ist ein visueller Stil, der Milchglas imitiert Ein Element erhält eine Hintergrundfarbe mit geringer Opazität und einen Hintergrundfilter, der die Pixel dahinter verwischt, sodass Formen und Farben darunter durch die Oberfläche erweicht erscheinen Ein dünner Lichtrand lässt auf den Glasrand schließen, und ein sanfter Schatten hebt das Panel von der Seite.

Die Schlüsseleigenschaft ist backdrop-filterW3C definiert Filtereffekte Modul Level 2. Es benötigt die gleichen Filterfunktionen wie filter (blur(), saturate(), brightness() Und der Rest) aber wendet sie auf den Bereich hinter dem Element an, statt auf das Element selbst, Dass ein Unterschied ist, was die Wirkung möglich macht.

Hier ist der komplette Block, den der Generator für seine Frosted-Voreinstellung erzeugt:

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);

Sechs Zeilen, und jede hat einen Job.

Filter vs. Hintergrundfilter: Was ist der Unterschied?

filter Ändert die Art und Weise, wie das Element selbst gezeichnet wird, einschließlich seines Textes und seiner Kinder. backdrop-filter Ändert, was durch das Element von hinten angezeigt wird, und lässt das Element's eigenen Inhalt scharf.

Eigentum	Was es betrifft	Beispielergebnis verwischen	Typische Verwendung
filter: blur(10px)	Das Element und all seine Kinder	Die Karte und ihr Text sind unscharf	Bildeffekte, deaktivierte Zustände, Ladeplatzhalter
backdrop-filter: blur(10px)	Was auch immer hinter dem Element gemalt ist	Die Karte bleibt scharf, der durch sie hindurch gesehene Hintergrund ist unscharf	Frostglasplatten, unscharfe Kopfzeilen, modale Überlagerungen

Wenn Sie eine Karte verwischen mit filter und wundert euch, warum die Überschrift unlesbar ist, ihr habt die falsche Eigenschaft verwendet Die CSS-Filtergenerator Bedeckt die filter Seite des Paares.

Wie funktioniert jede Zeile des Glas-CSS?

Der Hintergrund Tönung ist, und sein Alphakanal ist die wichtigste Zahl im Block. rgba(255, 255, 255, 0.2) Weiß ist bei 20% Deckkraft Bei einem Alpha von 1 ist die Platte fest und nichts zeigt durch, also ist die Kulissenunschärfe unsichtbar Bei einem Alpha von 0 gibt es gar keine Oberfläche Das meist verwendbare Glas sitzt zwischen 0,1 und 0,4.

Im Generator ist dies der Transparency-Slider, und die Benennung braucht einen Hinweis: Der Slider stellt die Deckkraft der Füllung ein, so dass ein höherer Transparency-Wert das Panel solider macht Transparency 20% schreibt ein Alpha von 0,2, und 40% schreibt 0,4.

Der Kulissenfilter Macht die Frostierung. blur(10px) Legt den Radius der Unschärfe fest, die auf das dahinter liegende angewendet wird. saturate(120%) Steigert die Farbe dieses unscharfen Hintergrunds um 20%, was dem grauen, verwaschenen Look entgegenwirkt, den Unschärfe und ein weißer Farbton erzeugen. Der Generator's Blur-Schieberegler läuft von 0 bis 40 px und die Sättigung von 100% bis 200%.

Die vorgefertigte Kopie Existiert, da ältere Safari-Veröffentlichungen nur verstehen -webkit-backdrop-filter. Das Schreiben beider Zeilen mit identischen Werten kostet nichts und deckt diese Versionen ab.

Der Grenzradius Rundung der Ecken, im Generator 0 bis 50 px. Die Unschärfe wird auf die abgerundete Form abgeschnitten.

Die Grenze Ist eine 1 px Linie von weiß mit 18% Deckkraft, fällt als Highlight am Glasrand ins Auge und kommt am meisten auf dunkleren Hintergründen an, wo sich die Panelgrenze sonst auflösen würde Die Kontrollbox Generator' s Border schaltet sie ein oder aus; Farbe und Breite sind fixiert.

Der Schatten 0 8px 32px rgba(0, 0, 0, 0.12) Weit, schwacher Tropfenschatten ist, der das Panel von der Seite trennt, wenn man es stimmen will, wird die Kastenschattenführer Versatz, Unschärfe und Ausbreitung in der Tiefe erklärt.

Was produzieren die Generatorvoreinstellungen?

Die Voreinstellungen sind eher Ausgangspunkte als fertige Designs Alle fünf verwenden einen Radius von 16 px, und alle außer Subtle enthalten den Rand.

Voreingestellt	Hintergrund	Hintergrundfilter	Grenze	Am besten über
Gefrost	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	Auf	Bunte Verläufe und Fotos
Licht	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	Auf	Besetzt Bilder, bei denen Text mehr Unterstützung benötigt
Dunkel	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	Auf	Lichtfotos, weißer Text
Lebendig	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	Auf	Dunkle oder gesättigte Heldenabschnitte
Subtil	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	Aus	Kleine Chips und Abzeichen

Der Generator lädt mit Frosted ausgewählt Klicken Sie auf eine Voreinstellung, passen Sie die Schieberegler und die Tönungsfarbe an und der Codeblock aktualisiert sich beim Ziehen.

Warum funktioniert mein Hintergrundfilter nicht?

Wenn die Unschärfe scheinbar nichts bewirkt, ist fast immer eine davon die Ursache.

1. Der Hintergrund ist undurchsichtig. Ein Feststoff background: #fff Oder ein Alpha von 1 verbirgt den Hintergrund komplett Senken Sie das Alpha.
2. Dahinter steckt nichts, was verschwimmen könnte. Über einer flachen einfarbigen Seite sieht eine unscharfe flache Farbe identisch mit der flachen Farbe aus Glas braucht einen Farbverlauf, ein Foto oder Formen dahinter Die generator' s Vorschau sitzt aus diesem Grund bewusst über einem Farbverlauf mit farbigen Kreisen; die CSS-Gradientenführer Gute Quelle für Hintergründe ist, die den Effekt gut zeigen.
3. Das Präfix fehlt. Ältere Safari-Versionen ignorieren die nicht vorbehandelte Eigenschaft.
4. Ein Vorfahr begrenzt, was der Filter sehen kann. In der aktuellen Filter Effects-Spezifikation sind einige Eigenschaften auf einen Vorfahren, wie zum Beispiel seine eigenen filter'n opacity Unter 1 oder einem anderen backdrop-filter, starten Sie eine neue Hintergrundwurzel, und die Unschärfe probiert nur den Inhalt innerhalb dieser Wurzel aus. Wenn das Glas mit einer davon in einer Hülle sitzt, verschieben Sie den Effekt oder die Eigenschaft.
5. Das Panel hat keine Größe oder ist auf andere Weise vollständig transparent. Ein Nullhöhenelement oder opacity: 0 Auf der Platte verbirgt sich der Effekt zusammen mit der Platte.

Wie hält man Text auf einer Glasscheibe lesbar?

Lesbares Glas macht mehr Arbeit als jeder andere Teil des Stils, da die Textfarbe festgelegt ist, während der Hintergrund unter der Tafel nicht festgelegt ist. Die WCAG 2.2 Kontrastminimum Fordert ein Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text Auf einem durchscheinenden Panel hängt dieses Verhältnis davon ab, was sich in diesem Moment hinter jedem Teil des Panels befindet.

Ein bearbeitetes Beispiel macht dies konkret Das Kontrastverhältnis wird aus der relativen Leuchtdichte der beiden Farben berechnet, (L1 + 0,05) / (L2 + 0,05).Ein Glasfüllverbundwerkstoff über dem Hintergrund: Jeder Kanal wird Alpha mal Füllung plus (1 minus Alpha) mal Hintergrund Unschärfe bildet den Durchschnitt benachbarter Pixel, lässt aber eine Region zurück's durchschnittliche Farbe ungefähr dort, wo sie war, sodass über eine große Fläche einer Farbe die Zusammensetzung eine faire Schätzung ist.

Füllen	Kulissenfarbe	Verbundfarbe	Kontrast mit weißem Text
Gefroren, weiß bei 0,2	Blau #60A5FA	über rgb(128, 183, 251)	etwa 2,1:1
Gefroren, weiß bei 0,2	Gelb #FBBF24	über rgb(252, 204, 80)	ungefähr 1,5:1
Dunkel rgba(15, 23, 42, 0.25)	Blau #60A5FA	über rgb(76, 130, 198)	ungefähr 4,0:1

Nehmen Sie die erste Zeile Rot ist 0,2 x 255 + 0,8 x 96 = 127,8, Grün ist 0,2 x 255 + 0,8 x 165 = 183, Blau ist 0,2 x 255 + 0,8 x 250 = 251. Diese Farbe's relative Leuchtdichte funktioniert in der Nähe von 0,454 und White's ist 1, also ist das Verhältnis 1,05 /0,504, etwa 2,1: Das gleiche Feld reicht für den Text nicht aus.1.

Die praktischen Lösungen, in der Reihenfolge ihrer Wirksamkeit:

• Erhöhen Sie die Füll-Alpha. Durch die Verschiebung der Transparenz von 20% auf 40% wird mehr Hintergrund verborgen und der Bereich, über den der Kontrast schwingt, wird eingeschränkt.
• Verdunkeln Sie den Farbton für hellen Text‘oder für dunklen Text aufhellen Dunkelglas mit weißem Text hält über weit mehr Hintergründen als weißes Glas mit weißem Text.
• Erhöhen Sie die Unschärfe. Es glättet kontrastreiche Details, sodass eine dünne weiße Linie hinter einem Buchstaben ihn nicht durchschneidet.
• Fügen Sie einen Textschatten hinzu Als letztes Mittel für Überschriften Die Text-Schattengenerator Schnell eine weiche macht.
• Testen Sie an den Extremen. Überprüfen Sie den Kontrast über die hellsten und dunkelsten Bereiche, auf denen das Panel sitzen kann Farbkontrastprüfung„Nicht an einem geeigneten Ort.

Der Generator' s kopierte CSS deckt nur die Glasoberfläche ab Der weiße Text in seiner Vorschau ist nicht Teil der Ausgabe, also einstellen color Auf dein Element selbst.

Schadet der Hintergrundfilter der Leistung?

Es kann. eine Hintergrundunschärfe zwingt den Browser, die Pixel hinter dem Element zurückzulesen und bei jeder Änderung dieses Bereichs eine Unschärfe darüber zu laufen Auf einer statischen Karte, die günstig ist Auf einem großen Bereich, beim Scrollen oder wenn Inhalte hinter dem Panel animiert werden, ist es einer der teureren Effekte, zusammengesetzt zu werden, und Telefone mit geringerer Leistung zeigen es zuerst als fallengelassene Frames an.

Richtlinien, die es unter Kontrolle halten:

• Halten Sie Glasplatten von bescheidener Größe Eine Vollsichtmaschige Auflage kostet weit mehr als eine Karte.
• Bevorzugen Sie kleinere Unschärferadien. Die Kosten steigen mit dem Radius, und nach etwa 20 Prozent ist der visuelle Unterschied gering.
• Vermeiden Sie es, den Unschärfewert selbst zu animieren Animieren opacity oder transform Des Panels statt.
• Vorsicht bei klebrigen Headern über langen Scrollinhalten, die auf jedem Scrollframe wieder verwischen Testen Sie auf einem echten Mittelklasse-Telefon.

Wie fügt man einen Fallback für Browser oder Benutzer hinzu, die einen benötigen?

Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen alle backdrop-filter. Sehr alte Browser ignorieren es und zeigen die halbtransparente Füllung ohne die Unschärfe an, die bei niedrigem Alpha Text auf einem ausgelasteten Hintergrund hinterlassen kann Zwei kleine Ergänzungen lassen den Effekt gut abbauen, Sie können die aktuelle Support-Tabelle auf überprüfen MDN's Hintergrundfilterseitedrohen

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

der @supports Block wendet nur die durchscheinende Version an, wo die Unschärfe existiert Die prefers-reduced-transparency Medienfunktion, definiert in Medienabfragen Level 5, können Benutzer, die ihr Betriebssystem für weniger Transparenz gebeten haben, ein solides Panel erhalten Browserunterstützung für diese Medienfunktion ist noch unvollständig, so behandeln Sie es als eine Verbesserung, wo verfügbar, und nicht als die einzige Schutzmaßnahme.

Glasmorphie vs. Neumorphismus vs. flaches Design

Glasmorphie ist einer von mehreren Oberflächenstilen und hat jeweils unterschiedliche Kosten.

Stil	Wie die Oberfläche hergestellt wird	Haupt-css	Stärke	Hauptrisiko
Glasmorphie	Durchscheinende Füllung plus Hintergrundunschärfe	background Mit Alpha backdrop-filter	Tiefe und Kontext aus dem Hintergrund	Kontrast variiert, Unschärfe kostet Leistung
Neumorphismus	Gleiche Farbe wie die Seite, erhöht oder gedrückt durch gepaarte Schatten	Zwei box-shadow Schichten	Weiche, taktile Bedienelemente	Sehr geringer Kontrast zwischen Kontrolle und Seite
Flach	Feste Füllungen, keine Tiefe	background	Schnell und vorhersehbar	Schlicht fühlen kann
Materialstilüberhöhung	Feste Füllung mit Schattentiefenstufen	box-shadow	Klare Hierarchie	Weniger atmosphärisch

Wenn der weiche, extrudierte Look näher an dem liegt, was Sie wollen, ist die Neumorphismusgenerator Baut die gepaarten Schatten auf Viele Schnittstellen mischen Stile: Glas für eine schwebende Navigationsleiste über einem Heldenbild, flache Karten für dichten Inhalt darunter.

Wie man eine Glaskarte baut, fange an, fertig zu werden

1. Öffne das Milchglas CSS Generator Und wählen Sie die Voreinstellung aus, die Ihrem Hintergrund am nächsten liegt: Dunkel für Lichtfotos, Frosted oder Licht für bunte Farbverläufe.
2. Stellen Sie Blur so hoch ein, dass Hintergrunddetails nicht mit Text konkurrieren, normalerweise 8 bis 16 Prozent.
3. Stellen Sie Transparenz ein Beginnen Sie bei 20% und erhöhen Sie sie, bis Ihr Text den Kontrast über den härtesten Teil des Hintergrunds überschreitet.
4. Wählen Sie mit dem Farbwähler eine Tönung aus Eine Tönung, die aus dem Hintergrund gezogen wird's eigene Palette sieht natürlicher aus als reines Weiß.
5. Passen Sie Radius an die übrigen Komponenten an und behalten Sie Border bei, um dunkle Hintergründe zu erhalten.
6. Klicken Sie auf CSS kopieren und fügen Sie den Block in Ihre Kartenklasse ein Hinzufügen color und sich vollstopfen.
7. Wickeln Sie den Block in die @supports Fallback oben, wenn Sie ältere Browser unterstützen.

Alles im Generator läuft in Ihrem Browser, es wird also nichts hochgeladen und es funktioniert nach dem Laden der Seite offline weiter Für verwandte Oberflächen - und Effekt-Tools wird die Hub für CSS-Tools Listen Sie Verläufe, Schatten, Filter und Übergänge an einer Stelle auf.