– Today I Learned …
Milchglas-Effekt
Um einen durchscheinenden Effekt zu erzielen, gibt es verschiedene Möglichkeiten
- die Farben von Hintergrund (background), Rand (border) und Schrift können durch den Alphakanal Transparenz erhalten
- mittels der CSS-Eigenschaft Opacity kann ein Objekt durchsichtig gemacht werden
- das Pseudo-Element ::backdrop gestaltet den Bildschirm unter einem Overlay-Objekt
- der backdrop-filter gestaltet den Hintergrund unter einem Element mit einem CSS Filter wie Unschärfe, Helligkeit und Sättigung
Beispiel für Transparenz mittels Alpha-Kanal
statt rgb(x,y,z) verwendet man rgba(x,y,z,n) bzw.
statt #rrggbb nutzt man #rrggbbXX für die Farbkodierung
n bzw. XX sind ein beliebiger Wert zwischen 0 und 1
0 = transparent; 1 = opak; (0.5 = semitransparent)
Beispiel für Opacity
opacity bestimmt die Deckkraft sowohl von Farben als auch von Bildern
Achtung: es vererbt sich auf inneliegende Teile, was nicht immer erwünscht ist
Beispiel für ::backdrop
::backdrop ist quasi eine hinter einem Objekt liegende (Fullscreen)Fläche, die die Aufmerksamkeit auf das Objekt lenkt
für Vollbild-Milchglas-Effekt (Dialoge, modale Fenster) eignen sich bes. backdrop-filter: blur(10px) und background-color: rgba(0,0,0,0.6)
Beispiel für Backdrop-Filter
der Filter verändert Unschärfe (blur()), Helligkeit (brightness()), Kontrast (contrast()) oder Sättigung (saturate()) unter einem Element [einzeln oder in Kombination]
für Milchglas-Effekte eignen sich am besten Kombinationen aus blur() und brightness()
Verfeinerungen sind möglich über „unsichtbaren Rand“, Abrundung und etwas Schatten
border: 1px dotted rgba(0, 0, 0, 0.5); border-radius: 5px;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
Update 03.03.2026