CSS ::backdrop und backdrop-filter

backdrop-filter – Effekte für den Element-Hintergrund

Die Eigenschaft backdrop-filter wendet grafische Effekte auf den Hintergrund hinter einem Element an – also nicht auf das Element selbst, sondern auf das darunter liegende Element. Typische Effekte setzen Unschärfe (blur) oder Farbveränderungen auf den Hintergrund, so etwa bei Overlays, modalen Fenstern oder Glassmorphism-Effekten.

.overlay p {
	backdrop-filter: blur(3px);
}

<div class="overlay">
	<p>Text im Overlay</p>
</div>

Wie entsteht der Milchglas-Effekt?

Der Milchglas-Effekt entsteht, wenn ein transparentes Element mit Unschärfe über dem Hintergrund liegt.

Rosen, Tulpen, Nelken

<figure style="position: relative">
	<img src="tulpen.webp" … >
	<div class="glassmorph">Rosen, Tulpen, Nelken</div>
</figure>

.glassmorph {
	position: absolute; 
	backdrop-filter: blur(5px) brightness(1.1); 
	border: 1px dotted rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

::backdrop mit backdrop-filter – Fullscreen Milchglas-Effekt

Während backdrop-filter auf den Hintergrund eines Elements wirkt, gestaltet ::backdrop systemseitige Overlay-Hintergrund-Elemente bei Vollbild.

• ::backdrop erzeugt einen Layer
• backdrop-filter erzeugt einen Effekt

<button onclick="document.querySelector('dialog').showModal()">
	Dialog öffnen
</button>

<dialog>
	Das dialog-Element legt sich über das gesamte Browserfenster …
	<button type="button" 
	        onclick="document.querySelector('dialog').close()">Schließen
	</button>
</dialog>

::backdrop {
	background-color: oklch(0.9 0 0 / 0.5);
	backdrop-filter: blur(4px);
}

background-color mit Transparenz 0.5 hinter der Dialog-Box soll den Hintergrund ruhig gestalten, der backdrop-filter ist hier ein Weichzeichnungsfilter (blur), der das ruhige Erscheinungsbild weiter verstärkt.

Erst JavaScript showModal() erzeugt das modale Fenster, dass sich über das aktuelle Browserfenster legt.

<button onclick="document.querySelector('dialog').showModal()">
	Dialog öffnen
</button>