These days it's common for modal dialogs to also reduce the brightness of the background content, to make it clear that it can't be interacted with. This is especially common on the web.

What is the name of the darkening behind the modal?

Example of a modal dialog

Since I've never known the standard name, I have resorted to a slightly silly name: sneezeguard.

  • 1
    Ah, it seems to be called an "overlay". That makes sense. – aaaidan Dec 20 '17 at 21:59
  • Can you clarify if you're looking for opinions on what a good semantic term would be for that element, or do you want to know how various UI frameworks actually refer to it? – Luke Smith Dec 22 '17 at 2:15
  • @LukeSmith uh... both, either? I thought that there would be a clear, standard name. (I'm realising that there are at least a couple of contenders). – aaaidan Dec 22 '17 at 22:57
  • Ultimately, I want advice on what I should call it. I'd rather use an existing, accepted term, but it would be great if it was also descriptive. – aaaidan Dec 22 '17 at 22:58
  • Any particular reason you need to refer to it as anything besides what the framework has decided to call that particular DOM element? See the answer below re: Bootstrap's modal. – Luke Smith Dec 24 '17 at 2:57

It is refereed to as "modal backdrop"

in Bootstrap documentation at Modal / Options


This is called a lightbox effect. It can also be referred to as 'out of focus,' as in, the modal is now in focus and the window behind it is disabled.


  • In fact, that is not at all an "effect". It is a separate element (div) with a clear purpose, a HTML component with a group of CSS proprieties. – Madalina Taina Dec 27 '17 at 12:15
  • @MadalinaTaina it is an effect. The same way drop downs are effects as well as elements. – insidesin Dec 29 '17 at 2:48
  • @insidesin I’m a developer and what you said hasn’t any sense. – Madalina Taina Dec 29 '17 at 2:56
  • Then you're not a good developer. @MadalinaTaina – insidesin Dec 29 '17 at 2:57
  • @insidesin Really? “Effect” Is the term you use for html elements? Please show a reference if you want to continue this conversation and limit the comments to the subject, not to my skills. Happy holidays to you too! – Madalina Taina Dec 29 '17 at 3:06

In the last years, the term I always found in frameworks for the transparent background of a modal/ dialog/ pop-up is overlay.

See: Considerations for Styling a Modal.

Dealing with the overlay A modal is often accompanied by a full-screen-covering overlay. This is useful for a number of reasons:

  • It can darken (or otherwise mute) the rest of the screen, enforcing the "you need to deal with this before you leave" purpose of a modal.
  • It can be used to prevent clicks/interactions on stuff outside the modal.
  • It can be used as a giant close button. Or "cancel" or whatever the most innocuous action is.

In material design is used the term backdrop.

enter image description here


Google Material Design Guidelines call it Scrim: https://material.io/design/environment/surfaces.html#attributes


Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

Scrims can be applied in a variety of ways, including:

  • Darkening or lightening the surface and its content
  • Reducing the opacity of the surface and its content

Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.

  • 2
    yes, Material took this name from theaters lightning and some old digital design lingo for printing. That's how I call it, but backdrop is used a lot as well – Devin Feb 1 '19 at 17:19

The background behind the modal is blurred and darkened for a 3D effect to get more visual contrast and make the background recede visually.

A good word for the dark, transparent layer over the blurred background is scrim. Scrim is something used to physically cover the lights in photography and film shoots - to get lighting effects.

Here's the word scrim being used in Material Design guidelines.

Users should be able to tap or click on the background cover, or scrim, to close whatever is opened in the foreground. Like they're tapping on the background to open it back up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.