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

Documentation

Overview

This component puts a backdrop over the entire viewport.

Usage

Class	Applied to	Outcome
`.pf-v6-c-backdrop`	`<div>`	Initiates backdrop. Required
`.pf-v6-c-backdrop__open`	`<body>`	Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. Required

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--Position	fixed
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--ZIndex	400
--pf-v6-c-backdrop--ZIndex --pf-t--global--z-index--lg --pf-t--global--z-index--400 400
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--BackgroundColor	(In light theme) rgba(21, 21, 21, 0.2000)
--pf-v6-c-backdrop--BackgroundColor --pf-t--global--background--color--backdrop--default --pf-t--global--background--color--500 rgba(21, 21, 21, 0.2000)

Edit this page on GitHub

Red Hat

Copyright © 2014-2025 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines