Backdrop Blur

Use backdrop-blur utilities to apply a blur filter to the area behind an element. This creates a frosted glass effect over content rendered beneath.

Basic example

Use utilities like backdrop-blur-sm and backdrop-blur-md to control an element’s backdrop blur:

Style('...', child: Style('bg-white/30 backdrop-blur-none ...'))
Style('...', child: Style('bg-white/30 backdrop-blur-sm ...'))
Style('...', child: Style('bg-white/30 backdrop-blur-md ...'))

Class reference

Class	Description
backdrop-blur-none	Remove backdrop blur
backdrop-blur-xs	Apply an extra small backdrop blur (4px)
backdrop-blur-sm	Apply a small backdrop blur (8px)
backdrop-blur	Apply a normal backdrop blur (8px)
backdrop-blur-md	Apply a medium backdrop blur (12px)
backdrop-blur-lg	Apply a large backdrop blur (16px)
backdrop-blur-xl	Apply an extra large backdrop blur (24px)
backdrop-blur-2xl	Apply a 2x extra large backdrop blur (40px)
backdrop-blur-3xl	Apply a 3x extra large backdrop blur (64px)