مولد تدرجات CSS
تدرج CSS صورة خلفية. التدرج من الأحمر إلى الأزرق من اليسار إلى اليمين يُكتب background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);، والتدرج الشعاعي من الأبيض إلى الأسود يُكتب background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);.
طريقة الاستخدام
- اختر إعدادًا جاهزًا أو ابدأ من الافتراضي، ثم اختر «خطي» أو «شعاعي».
- في التدرج الخطي اضبط الزاوية بالمنزلق أو بمربع الرقم: 0 درجة تشير إلى الأعلى، و90 إلى اليمين، و180 إلى الأسفل، و270 إلى اليسار. وفي الشعاعي اختر circle أو ellipse وموضع المركز.
- عدّل النقاط اللونية: غيّر اللون من مربع الألوان أو برمز HEX، وحدد موضعه بين 0 و100 بالمئة. يمكنك إضافة 6 نقاط كحد أقصى، وحذف نقطة، أو توحيد المسافات بزر «توزيع متساوٍ».
- اضغط «نسخ CSS». السطر الأول لون ثابت للمتصفحات القديمة، والسطر الثاني هو التدرج.
طريقة الحساب
يمزج التدرج الخطي الألوان على امتداد خط. تحدد الزاوية اتجاه هذا الخط بالدرجات مع عقارب الساعة من الأعلى: 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين. تربط كل نقطة لونية لونًا بموضع على الخط، ويمزج المتصفح ما بين النقاط المتجاورة بسلاسة.
يمزج التدرج الشعاعي الألوان من مركز نحو الخارج. الشكل إما دائرة (circle) أو قطع ناقص (ellipse) يتمدد مع الصندوق، والكلمات المفتاحية مثل at top left تنقل المركز. الموضع 0 بالمئة هو المركز، و100 بالمئة أبعد حافة.
ترتب الأداة النقاط حسب الموضع قبل كتابة CSS، فلا يهم ترتيب تعديلك. نقطتان في الموضع نفسه تصنعان حدًا حادًا بدل الانتقال. وتُقرَّب المواضع إلى منزلتين عشريتين.
تقبل الألوان صيغة HEX من 3 أو 6 أو 8 خانات. الصيغة ذات الخانات الثماني تنتهي بزوج ألفا، فـ#11182700 شفاف تمامًا. ويُعرض التدرج الذي يتلاشى إلى الشفافية فوق نقش رقعة شطرنج في المعاينة.
مرجع سريع للزوايا
| الزاوية | الاتجاه | بالكلمة المفتاحية |
|---|---|---|
| 0deg | من الأسفل إلى الأعلى | to top |
| 90deg | من اليسار إلى اليمين | to right |
| 180deg | من الأعلى إلى الأسفل | to bottom |
| 270deg | من اليمين إلى اليسار | to left |
| 135deg | من أعلى اليسار إلى أسفل اليمين | to bottom right (تقريبًا) |
أسئلة شائعة
لماذا السطر الأول لون ثابت؟
إنه احتياط للبيئات التي لا تدعم التدرجات. المتصفحات التي تفهم السطر الثاني تستخدمه، ويمكنك حذف السطر الأول إن لم تحتج إلى الاحتياط.
ماذا يعني 135deg؟
يتجه خط التدرج إلى أسفل اليمين: يبدأ من الزاوية العلوية اليسرى وينتهي في السفلية اليمنى. و90deg تعني من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل.
كيف أصنع شريطًا حادًا بدل الانتقال الناعم؟
أعطِ نقطتين الموضع نفسه. مثلًا الأحمر عند 50 بالمئة والأزرق عند 50 بالمئة يصنعان حدًا حادًا في المنتصف.
كيف أجعل التدرج يتلاشى إلى الشفافية؟
استخدم HEX من 8 خانات مثل #11182700 للنقطة الأخيرة. الانتقال إلى الكلمة transparent قد يبدو رماديًا في المتصفحات القديمة مثل Safari القديم، واستخدام اللون نفسه بألفا صفر أكثر أمانًا.
هل التدرج المخروطي (conic) مدعوم؟
ليس بعد. تغطي هذه الأداة التدرجات الخطية والشعاعية.
هل يُرفع أي شيء؟
لا. تُنتج المعاينة وCSS في متصفحك.