Overlays are nothing more than semi-transparent backdrops used to draw focus away from the content underneath them and onto the content above them. Common use cases involve modals, dialogs and drawers.
<aside> 🔸 Note: Overlays should be used sparingly and only when it's absolutely necessary to restrict access to the content underneath them.
</aside>