Skip to content

Backdrop

A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed.

Examples

Basic

Basic screenshot

Animated

Toggle the .pf-m-show class to see the show and hide animation.

Animated screenshot

Edit this page on GitHub

Contribute

Community

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat
Copyright © 2014-2026 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines