# 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FhwPAMkCoN5TDqHMck5If%2Fdocs-de-config-theme-components-backdrop.png?alt=media&#x26;token=165b3f07-3775-4f43-a8fb-182498e33b3a" 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FWbJqpikQGiOHqJcrA3YW%2Fdocs-de-storefront-theme-components-backdrop.png?alt=media&#x26;token=d8d93d97-96f5-472e-8319-0a4aede0163e" alt=""><figcaption></figcaption></figure>

[^1]: Popup