# Backdrop: what it is and how it works · Zorraquino
> A backdrop is a layer behind an interface’s main content that shows context or controls related to what is in front.
URL: https://www.zorraquino.com/en/dictionary/ux/backdrop.html

# Backdrop

A backdrop, in interface design, is a layer behind the main content that displays context or controls related to what appears in front

What it means, how it is used and where it comes up, with its related concepts.

[The whole glossary](https://www.zorraquino.com/en/dictionary)

## What it is and how it works

In Material Design 2, the backdrop was a component made up of a back layer, holding navigation, filters or settings, and a front layer with the content. When the back layer was revealed, the front layer moved down but stayed visible, and actions at the back changed what was shown at the front, for example by filtering a list.

Material Design 3 does not include this component and handles those cases with bottom sheets, panes or menus. More generally, “backdrop” also refers to the semi-transparent layer that dims the background when a dialog opens; CSS has a ::backdrop pseudo-element for styling it.

Also known as

Back layer

Topics

[Experience and service design](https://www.zorraquino.com/en/dictionary/category/experiencia-y-diseno-de-servicios)

## Related concepts

- [Scrim](https://www.zorraquino.com/en/dictionary/ux/scrims.html)
- [Surface colour](https://www.zorraquino.com/en/dictionary/ux/surface-color.html)
- [Design system](https://www.zorraquino.com/en/dictionary/digital-marketing/design-system.html)