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.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

إزالة التشفير من كود جافا سكريبت مُصغَّر أو مُعبَّأ باستخدام إعادة تسمية المتغيرات، وفك ترميز السلاسل النصية ومصفوفات البيانات، بالإضافة إلى عكس تسطيح تدفق التحكم وتحسين هيكله.

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

الأداة متاحة بلغات أخرى