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.

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) rgb(21, 21, 21, 0.4000)
--pf-v6-c-backdrop--BackgroundColor --pf-t--global--background--color--backdrop--default --pf-t--global--background--color--500 rgb(21, 21, 21, 0.4000)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--Opacity	0
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionProperty	opacity, visibility
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionTimingFunction	cubic-bezier(.4, 0, .7, .2)
--pf-v6-c-backdrop--m-animate--TransitionTimingFunction --pf-t--global--motion--timing-function--accelerate --pf-t--global--timing-function--100 cubic-bezier(.4, 0, .7, .2)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionDuration	100ms
--pf-v6-c-backdrop--m-animate--TransitionDuration --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration	200ms, 0s
--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration --pf-t--global--motion--duration--fade--default, 0s --pf-t--global--motion--duration--md, 0s --pf-t--global--duration--200, 0s 200ms, 0s
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction	cubic-bezier(0, 0, .2, 1)
--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction --pf-t--global--motion--timing-function--decelerate --pf-t--global--timing-function--300 cubic-bezier(0, 0, .2, 1)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--Opacity	1
	.pf-v6-c-backdrop.pf-m-show	--pf-v6-c-backdrop--m-animate--TransitionDuration	200ms, 0s
--pf-v6-c-backdrop--m-animate--TransitionDuration --pf-v6-c-backdrop--m-animate--m-show--TransitionDuration --pf-t--global--motion--duration--fade--default, 0s --pf-t--global--motion--duration--md, 0s --pf-t--global--duration--200, 0s 200ms, 0s
	.pf-v6-c-backdrop.pf-m-show	--pf-v6-c-backdrop--m-animate--TransitionTimingFunction	cubic-bezier(0, 0, .2, 1)
--pf-v6-c-backdrop--m-animate--TransitionTimingFunction --pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction --pf-t--global--motion--timing-function--decelerate --pf-t--global--timing-function--300 cubic-bezier(0, 0, .2, 1)