📌 این ویژگی مشخص می‌کنه که پس‌زمینه پشت یک عنصر چقدر تاری (blur) داشته باشد و افکت شیشه‌ای (frosted glass) ایجاد کند.
در Tailwind از کلاس‌های backdrop-blur-{size} استفاده می‌کنیم.

✅ کلاس‌ها

• backdrop-blur-none → بدون تاری

• backdrop-blur-sm → تاری کم

• backdrop-blur → تاری پیش‌فرض

• backdrop-blur-md → تاری متوسط

• backdrop-blur-lg → تاری زیاد

• backdrop-blur-xl → تاری خیلی زیاد

• backdrop-blur-2xl → تاری بسیار زیاد

• backdrop-blur-3xl → تاری خیلی زیاد

📌 می‌توان از responsive و hover هم استفاده کرد:

• hover:backdrop-blur-lg → هنگام هاور تاری زیاد شود

• sm:backdrop-blur-sm md:backdrop-blur-xl → موبایل کم، دسکتاپ زیاد

✅ مثال

<div class="relative w-32 h-32 bg-blue-500 mb-2">
  <div class="absolute inset-0 bg-white/30 backdrop-blur-sm flex items-center justify-center">
    backdrop-blur-sm
  </div>
</div>

<div class="relative w-32 h-32 bg-green-500 mb-2">
  <div class="absolute inset-0 bg-white/30 backdrop-blur-md flex items-center justify-center">
    backdrop-blur-md
  </div>
</div>

<div class="relative w-32 h-32 bg-red-500 mb-2">
  <div class="absolute inset-0 bg-white/30 backdrop-blur-xl flex items-center justify-center">
    backdrop-blur-xl
  </div>
</div>

<div class="relative w-32 h-32 bg-yellow-500 mb-2">
  <div class="absolute inset-0 bg-white/30 hover:backdrop-blur-2xl flex items-center justify-center">
    هاور backdrop-blur-2xl
  </div>
</div>

📌 نکات مهم

• Backdrop Blur روی پس‌زمینه عناصر زیرین اعمال می‌شود و نه خود عنصر.

• اغلب با background-color شفاف مثل bg-white/30 یا bg-black/20 ترکیب می‌شود.

• می‌توان با transition ترکیب کرد تا افکت نرم ایجاد شود:

  • transition duration-300 hover:backdrop-blur-lg