التأثيرات البصرية

<div class="shadow-md">ظلّ</div>
<div class="shadow-purple-500/50 shadow-lg">ظلّ ملوّن</div>

<div class="opacity-50">نصف شفّاف</div>
<div class="hover:opacity-100 opacity-70">يتّضح عند المرور</div>

<img class="blur-sm" />          <!-- ضبابية -->
<img class="grayscale" />        <!-- رمادي -->
<img class="brightness-110" />   <!-- سطوع -->
<img class="contrast-125" />     <!-- تباين -->
<div class="backdrop-blur-md">خلفية ضبابية (زجاجي)</div>

<div class="bg-white/20 backdrop-blur-lg rounded-xl border border-white/30 p-6">
  بطاقة زجاجية
</div>

<img class="rounded-full object-cover w-16 h-16" />   <!-- صورة دائرية -->