الخلفيات والتدرّجات

الدرس 10 من 25· ⏱ 1 دقائق قراءة

خلفية بلون

<div class="bg-purple-600">خلفية ملوّنة</div>

التدرّجات (Gradients)

<div class="bg-gradient-to-r from-purple-500 to-cyan-500">
  تدرّج أفقي
</div>

<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  تدرّج بثلاثة ألوان
</div>

الاتجاهات: to-r يمين، to-l يسار، to-t أعلى، to-br أسفل-يمين.

نصّ متدرّج (تأثير شائع)

<h1 class="bg-gradient-to-r from-purple-500 to-cyan-500
           bg-clip-text text-transparent">
  عنوان نيون
</h1>

صورة خلفية

<div class="bg-cover bg-center" style="background-image: url('/hero.jpg')">
</div>

bg-cover، bg-contain، bg-center، bg-no-repeat.

🎯 التالي: الحدود والاستدارة.

هل كان هذا الدرس مفيدًا؟