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

✅ کلاس‌ها

• backdrop-sepia-0 → بدون افکت (0%)

• backdrop-sepia یا backdrop-sepia-100 → کاملاً sepia (100%)

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

• hover:backdrop-sepia → هنگام هاور افکت sepia اعمال شود

✅ مثال

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

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

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

📌 نکات مهم

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

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

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

  • transition duration-300 hover:backdrop-sepia