# Backdrop

A backdrop is a semi-transparent layer that lies between an modal or offcanvas and the rest of the page when using a modal or offcanvas. It serves to focus the modal or offcanvas elements and prevents users from interacting with the background of the page at the same time.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FZ8Q8L4KaaFYbZ0Myk4w5%2Fdocs-en-config-theme-components-backdrop.png?alt=media&#x26;token=6028b92a-8040-4c37-85c8-e644ad89c90a" alt=""><figcaption></figcaption></figure>

When selecting the color for the **Background (1)**, make sure to select a partially transparent color using the color picker. The shop in the background of the element should only fade - not disappear completely.&#x20;

In addition, you can choose an optional **Accent color (2)**, which is mixed into the background color (1) using a color gradient.&#x20;

The shop in the background of the popup or offcanvas can be blurred using the value in the **Blur background (3)** field. This further increases the focus on the foreground element.

**Example:**

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FJE93MTSEZOQvdy7xcytr%2Fdocs-en-storefront-theme-components-backdrop.png?alt=media&#x26;token=b33c1e82-69dc-425b-aaf5-3967d0e3f0d8" alt=""><figcaption></figcaption></figure>