A scrim is a temporary effect applied to a surface for the purpose of making content below it less prominent.


A scrim being used to indicate that a drawer is modal.

A scrim being overlaid on an image to allow a readable caption on top of it.

Is this the right control?

Most controls that require scrims will apply one themselves, such as drawers.

Manually apply scrims only when:

  • Content would not be legible without them.
  • Modal controls are overlaid on content.