Overlays maskoverlayutility

Backdrop Mask

Simple reusable overlay for dimming/blurring the page behind menus.

Backdrop Blur

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { BackdropMask } from 'astro-component-kit';
---

<BackdropBlurMask>Content</BackdropBlurMask>
--- import { BackdropMask } from 'astro-component-kit'; --- <BackdropBlurMask>Content</BackdropBlurMask>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/BackdropMask.astro and paste the following code:

astro 
---
---
<div class="mask"></div>
<style>
  .mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; }
</style>
--- --- <div class="mask"></div> <style> .mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; } </style>

Quick Info

Category
Overlays
Filename
BackdropMask.astro
Dependencies
None — pure Astro + CSS
Tags
maskoverlayutility