> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/elemente/backdrop.md).

# Backdrop

Ein Backdrop ist ein halbtransparentes Layer, welches sich bei Verwendung eines Modals[^1] oder Offcanvas zwischen diesem und der restlichen Seite legt. Es dient dazu das Modal bzw. Offcanvas Elementen zu fokussieren und verhindert, dass Benutzer gleichzeitig mit dem Hintergrund der Seite interagieren.

<figure><img src="/files/3rKsdtuJfuHMlJk8VJat" alt=""><figcaption></figcaption></figure>

Achte bei der Auswahl der Farbe für den **Hintergrund (1)** darauf, eine teiltransparente Farbe über den Colorpicker auszuwählen. Der Shop im Hintergrund des Elementes sollte nur verblassen - nicht komplett verschwinden.

Zusätzlich kannst Du eine optionale **Akzentfarbe (2)** wählen, welche zu der Farbe für den Hintergrund (1) über einen Farbverlauf hinzugemischt wird.

Über den Wert im Feld **Hintergrund weichzeichnen (3)** kann der Shop im Hintergrund des Popups oder Offcanvas unscharf gemacht werden. Das verstärkt den Fokus auf das Vordergrundelement nochmals.

**Beispiel:**

<figure><img src="/files/k1h8uTJgBzQHWcRdGLTJ" alt=""><figcaption></figcaption></figure>

[^1]: Popup