CSS ::backdrop und backdrop-filter

CSS backdrop-filter

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

Pseudo-Element ::backdrop

Während backdrop-filter auf den Hintergrund eines Elements wirkt, gestaltet ::backdrop systemseitige Overlay-Hintergrund-Elemente bei Vollbild. Eine typische Anwendung ist ein Schleier hinter einem <dialog>-Element oder einem Element im Vollbildmodus.

::backdrop {
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
}