كيف تستخدمه؟
اختر النوع والألوان
خطي أو دائري أو مخروطي، ثم ألوانك ومواضعها، أو ابدأ من تدرج جاهز.
انسخ الكود
الصقه في CSS العنصر الذي تريده، أو في ووردبريس داخل «CSS إضافي».
أو حمّل الصورة
خلفية PNG للمنشورات والعروض وخلفيات الجوال، بالمقاس الذي تحتاجه.
أنواع التدرج
| النوع | شكله | يناسب |
|---|---|---|
| خطي | من جهة إلى أخرى بزاوية تختارها | خلفيات الأقسام والأزرار |
| دائري | من المركز إلى الأطراف | إبراز عنصر في المنتصف |
| مخروطي | يدور حول نقطة مثل عقارب الساعة | العجلات اللونية والرسوم الدائرية |
نصائح لتدرج جميل
لونان متقاربان أجمل. اختر لونين من العائلة نفسها، أو درجتين من لون هويتك.
انتبه للنص فوق التدرج. افحص تباين النص مع أفتح نقطة وأغمقها، بأداة فحص تباين الألوان.
الرمادي في المنتصف. بين لونين متقابلين مثل الأزرق والأصفر يمر التدرج العادي برمادي باهت، وخيار «تدرج أنعم» يحافظ على صفاء الألوان.
أسئلة شائعة
كيف أضع تدرج الألوان في موقعي؟
انسخ كود CSS وضعه داخل قاعدة العنصر، مثل .my-section { … }. في ووردبريس: المظهر ← تخصيص ← CSS إضافي.
هل التدرج بالكود أفضل من الصورة؟
في المواقع نعم: الكود لا يُحمَّل كصورة فيسرّع الصفحة، ويتكيف مع أي مقاس شاشة. استخدم الصورة للمنشورات والعروض والأماكن التي لا تقبل CSS.
ما معنى in oklch في الكود؟
طريقة حديثة لمزج الألوان تعطي تدرجًا أصفى. المتصفحات الحديثة تدعمها، والقديمة تتجاهل السطر وتستخدم السطر الذي قبله.
كيف أصنع تدرجًا ذهبيًا؟
اختر التدرج الذهبي من التدرجات الجاهزة (الدرجات #BF953F و #FCF6BA و #B38728)، ثم عدّل الزاوية حتى يبدو كالمعدن اللامع.
هل يمكنني استخدام الصور في أي مشروع؟
نعم. التدرج الذي تصنعه ملكك، ويُصنع داخل متصفحك دون رفع أي شيء.