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 الخاصة بك.

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

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

عدّاد FPS

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

مرجع جدول ASCII

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

مدقّق OpenAPI

الصق مستند OpenAPI أو Swagger بصيغة JSON أو YAML وافحص بنيته الأساسية: حقل الإصدار وكائن info والمسارات، مع أخطاء وتحذيرات واضحة.

مولّد مؤشرات التحميل بلغة CSS

أنشئ دوّارًا دائريًا بـ CSS خالص: اضبط القطر وسماكة الحدود واللون وسرعة الدوران، وشاهد المعاينة المباشرة، وانسخ كود CSS جاهزًا للاستخدام. بلا SVG وبلا JavaScript.

منسّق PHP

أضف فواصل أسطر ومسافات بادئة من مسافتين أو 4 مسافات إلى مقطع PHP بسيط. راجع النتيجة: فهذه الأداة ليست محلّل PHP ولا تطبّق PSR-12.

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