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

✅ کلاس‌ها

• backdrop-brightness-0 → کاملاً تاریک (0%)

• backdrop-brightness-50 → 50% روشنایی

• backdrop-brightness-75 → 75% روشنایی

• backdrop-brightness-90 → 90% روشنایی

• backdrop-brightness-95 → 95% روشنایی

• backdrop-brightness-100 → روشنایی پیش‌فرض (100%)

• backdrop-brightness-105 → 105% روشنایی

• backdrop-brightness-110 → 110% روشنایی

• backdrop-brightness-125 → 125% روشنایی

• backdrop-brightness-150 → 150% روشنایی

• backdrop-brightness-200 → 200% روشنایی

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

• hover:backdrop-brightness-125 → هنگام هاور روشنایی افزایش یابد

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

✅ مثال

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

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

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

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

📌 نکات مهم

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

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

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

  • transition duration-300 hover:backdrop-brightness-125