Softonic

مولد تدرجات CSS

خطوة 1 / 3
النوع
التالي

نادرًا ما تستخدم خلفيات واجهات المستخدم الحديثة لونًا مسطحًا؛ إذ تعتمد الأقسام الرئيسية (hero) والأزرار والبطاقات جميعها تقريبًا على تدرجات CSS. يتيح لك هذا المولّد اختيار نوع التدرج (خطي أو شعاعي)، وإضافة أي عدد من نقاط التدرج اللوني حسب الحاجة، وضبط الزاوية (للتدرجات الخطية) أو الشكل (للتدرجات الشعاعية)، بالإضافة إلى نسخ قيمة background: linear-gradient(…) نظيفة جاهزة للصق في ورقة الأنماط الخاصة بك.

كيفية إنشاء تدرج في CSS

  1. 1

    اختر نوع التدرج

    خطي (اتجاهي بزاوية) أو شعاعي (دائري/بيضاوي).

  2. 2

    قم بتحديد الزاوية أو الشكل

    خطي: من 0 إلى 360 درجة. شعاعي: دائرة أو بيضاوية.

  3. 3

    أضف نقاط التوقف اللونية

    كل نقطة توقف تمثل لونًا بالإضافة إلى موقع (من 0 إلى 100٪). تُعد التدرجات ذات نقطتين المعيار الأساسي؛ بينما توفر التدرجات ذات ثلاث نقاط أو أكثر انتقالات أكثر انسيابية.

  4. 4

    انسخ كود CSS

    النتيجة هي قيمة خاصية `background` واحدة يمكنك لصقها في أي ملف CSS.

ورقة مرجعية سريعة للصياغة

/* خطي */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* شعاعي (دائرة) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* متعدد النقاط */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

الزوايا التي تطابق الحدس فعلًا

تختلف زوايا التدرج في CSS عن علم المثلثات: يشير 0deg إلى الأعلى (الشمال)، ويشير 90deg إلى اليمين (الشرق)، بينما يشير 180deg إلى الأسفل، و270deg إلى اليسار.

الاتجاه الزاوية
من الأعلى إلى الأسفل 180deg
من الأسفل إلى الأعلى 0deg
من اليسار إلى اليمين 90deg
من الأعلى الأيسر إلى الأسفل الأيمن 135deg

تجنّب الألوان الوسطى الموحلة

تمر التدرجات الخطية بين الألوان المتكاملة (مثل الأزرق ← البرتقالي) عبر شريط رمادي عند حوالي 50٪ حيث يبدو المزيج «ميتًا». يمكن إصلاح ذلك عبر:

  • إضافة نقطة توقف وسطى بلون مرتبط (أزرق ← بنفسجي ← برتقالي).
  • استخدام استيفاء OKLCH (linear-gradient(in oklch, ...)) للحصول على مزجات أنعم إدراكيًا، مدعومة في جميع المتصفحات الحديثة اعتبارًا من عام 2024.
  • إزاحة أحد الطرفين قليلًا في درجة اللون بحيث يقع اللون الأوسط ضمن عائلة أكثر دفئًا.

نصيحة حول الأداء

تُرسم التدرجات بواسطة وحدة معالجة الرسوميات (GPU) وتكون تكلفتها منخفضة عادةً. ومع ذلك، قد يؤدي تحريك تدرج (حِيَل background-position، أو ضبابية SVG) إلى رفع تكلفة الرسم، اختبر على هاتف من الفئة المتوسطة قبل الإطلاق.

الأسئلة الشائعة

تقيس تدرجات CSS الزاوية باتجاه عقارب الساعة من الأعلى، بينما تقيسها الرياضيات القياسية عكس عقارب الساعة من اليمين. يشير 90deg في CSS إلى اليمين؛ أما في علم المثلثات فيكون ذلك 0°.

تسمح المواصفة بأي عدد. عمليًا، غالبًا ما يبدو استخدام أكثر من 4 إلى 5 نقاط توقف كقوس قزح؛ أما نقطتان أو ثلاث مختارة بعناية فتبدو أنظف دائمًا تقريبًا.

نعم، الصق القيمة على هيئة قيمة عشوائية (arbitrary value): class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". وللتدرجات القابلة لإعادة الاستخدام، عرّف أداة مساعدة (utility) مخصصة في إعدادات Tailwind الخاصة بك.

يرسل المحرر العادي إعدادات التدرج إلى الخادم لعرض المعاينة. وفي التدفق الإرشادي تظهر أيضًا النوع والزاوية والشكل ونقاط التوقف اللونية في رابط الصفحة. لا تدخل معلومات حساسة؛ فالأداة لا تحفظ مشروع تدرج قابلًا لإعادة الاستخدام.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

محول Base64 إلى Hex

حوّل سلسلة Base64 إلى بايتاتها الأساسية معروضة بالنظام الست عشري (hex). مفيد لفحص الرموز المميزة والمفاتيح والشهادات ورموز JWT.

محول ASCII إلى Hex

حوّل نص ASCII إلى قيم bytes بالنظام الست عشري. يستخدم الناتج رقمين hex لكل محرف، جاهزا لملفات memory dumps أو packet traces أو جداول firmware.

محدد ألوان HEX

اختر لون HEX أو أدخله واحصل على RGB وHSL وCMYK تقريبي والسطوع النسبي ونسب التباين مع الأبيض والأسود.