Backdrop Filters

Apply blur and effects to the area behind an element

Backdrop filters apply effects to the area behind an element, not the element itself. Great for frosted glass effects.

Backdrop Blur

Frosted Glassbackdrop-blur-md

Tailwind CSS

<!-- Frosted glass effect -->
<div class="relative">
  <img src="background.jpg" />
  <div class="backdrop-blur-md
    bg-white/10 border border-white/20
    rounded-lg p-4">
    Content on frosted glass
  </div>
</div>

31 / 35