Backdrop blurs

Backdrop blurs add depth and focus to overlays, modals, and frosted-glass surfaces. Mihr UI provides four pre-defined blur levels with light and dark overlay colors built in.

Access them via MihrBackdropBlurs.sm, .md, .lg, and .xl. Each returns a BackdropBlurStyle with sigma, overlay colors, and an ImageFilter.

Blur levels

Each level comes with a light overlay rgba(255,255,255,0.6) and a dark overlay rgba(0,0,0,0.6). The preview below demonstrates both modes for each level.

backdrop-blur-smlight

backdrop-blur-smdark

backdrop-blur-mdlight

backdrop-blur-mddark

backdrop-blur-lglight

backdrop-blur-lgdark

backdrop-blur-xllight

backdrop-blur-xldark

Token	Sigma	Blur (px)	Light overlay	Dark overlay
`MihrBackdropBlurs.sm`	4	8	#99FFFFFF	#99000000
`MihrBackdropBlurs.md`	8	16	#99FFFFFF	#99000000
`MihrBackdropBlurs.lg`	12	24	#99FFFFFF	#99000000
`MihrBackdropBlurs.xl`	20	40	#99FFFFFF	#99000000

Usage

Apply a blur via BackdropFilter and use the built-in overlay color for the current brightness:

Dart

final blur = MihrBackdropBlurs.md;

BackdropFilter(
  filter: blur.imageFilter,
  child: Container(
    color: blur.overlay(Theme.of(context).brightness),
    child: const Text('Frosted glass'),
  ),
);

Custom blurs

Create a custom blur with your own sigma and overlay colors using BackdropBlurStyle.custom():

Dart

final custom = BackdropBlurStyle.custom(
  sigma: 16.0,
  blurPx: 32,
  lightOverlay: Colors.white.withValues(alpha: 0.7),
  darkOverlay: Colors.black.withValues(alpha: 0.5),
);