تصميم تدرج ألوان CSS مع معاينة حية
صمّم تدرّج CSS باختيار الألوان والزاوية والنوع، عاين النتيجة مباشرة وانسخ الكود.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);يُركَّب محلياً
آمن للهويات غير المعلنة
بلا حساب
اتصال آمن
كيف تعمل
- 1
اختر ألوانك
حدّد لون البداية والنهاية، وأضف محطّات بينهما إن كان الانتقال يحتاج توجيهاً.
- 2
اضبط الاتجاه أو الشكل
اختر زاوية للتدرّج الخطي، أو شكلاً وموضعاً للشعاعي.
- 3
انسخ CSS
خذ تصريح `background` المولَّد مباشرةً إلى ملف التنسيق.
لماذا تستخدم هذه الأداة
تراه وأنت تبنيه
التدرّج يُحكم عليه من منتصفه لا من طرفيه — والمعاينة الحيّة تُظهر الجزء الذي يفسد فعلاً.
CSS جاهز للنسخ
المخرَج تصريح `background` صالح ومنسّق، بلا تنظيف قبل اللصق.
خطي وشعاعي
كلا النوعين مع تحكّم بالزاوية أو الشكل، وهو ما يغطّي تقريباً كل تدرّج يحتاجه موقع.
محطّات ألوان متعدّدة
أضف محطّات لتوجيه المسار بين الألوان بدل قبول ما تعطيه نقطة المنتصف.
لا شيء يُرفع
التصريح يُركَّب في متصفحك — ولا تُرسل أي قيمة لونية إلى أي مكان.
مجاني بلا حساب
بلا تسجيل، وبلا حدّ، وبلا علامة مائية.
المنتصف الموحل، ولماذا يحدث
أشيع خيبة مع التدرّجات أن لونين جميلين يُنتجان شريطاً رمادياً بنّياً باهتاً بينهما. وهذا ليس فشلاً تصميمياً بل رياضياً: المتصفحات تستوفي التدرّجات في فضاء sRGB، فتمزج قنوات الأحمر والأخضر والأزرق كلاً على حدة وبخطّ مستقيم. امزج أزرق مشبَعاً مع أصفر مشبَع بهذه الطريقة، فتصير نقطة المنتصف تحمل مقادير متوسّطة من القنوات الثلاث — وهذا هو تعريف الرمادي. والأثر أسوأ ما يكون بين لونين متباعدين على عجلة الصبغات — أزرق إلى أصفر، أحمر إلى أخضر — ويكاد لا يُلاحَظ بين المتجاورين. وإدراكه حساباً لا ذوقاً هو ما يجعله قابلاً للإصلاح.
إصلاحه بمحطّة وسيطة
العلاج العملي أن تكفّ عن ترك المتصفح يختار المسار. أضف محطّة لون في المنتصف واضبطها على الصبغة التي ينبغي أن يمرّ بها الانتقال — فتدرّج من الأزرق إلى الأصفر موجَّه عبر أخضر أو فيروزي يبقى زاهياً طوال الطريق، لأنك أخبرت الاستيفاء إلى أين يذهب بدل تركه يقطع المركز المحايد. واختيار ذلك اللون الأوسط أسهل في HSL، حيث تنتقي زاوية صبغة بين الطرفين وتُبقي التشبّع مرتفعاً؛ ومحوّل الألوان يحوّل تلك القيمة إلى HEX الذي يطلبه التصريح. ومحطّة واحدة موضوعة جيداً تُصلح معظم التدرّجات الباهتة.
الخطي والشعاعي، ومتى يصلح كلٌّ منهما
التدرّج الخطي يمتدّ على محور مستقيم بزاوية تحدّدها — 180 درجة من الأعلى للأسفل، و90 من اليسار لليمين، وما بينهما. وهو الخيار الصحيح لخلفية صفحة أو شريط رئيسي أو تعبئة زرّ، لأن العين تقرأه سطحاً لا جسماً. أما التدرّج الشعاعي فينتشر من نقطة إلى الخارج، فيُقرأ مصدر ضوء أو توهّجاً. والشعاعي ينجح لتأثير كشّاف خلف عنصر محوري، ويفشل خلفيةً لصفحة كاملة حيث يميل إلى الظهور بمظهر تظليل حوافّ لم يطلبه أحد. وإن ترددت، فالجواب خطي في الغالب الأعمّ.
التدرّجات والنصوص لا تتعايشان بسهولة
التدرّج خلف النص من أكثر حالات فشل الإتاحة اطّراداً على الويب، لسبب بنيوي: اشتراط التباين ينطبق على كل نقطة يعبرها النص، والتدرّج بحكم تعريفه له خلفية مختلفة عند كل نقطة. فعنوان يتجاوز 4.5:1 مقابل الطرف الفاتح من التدرّج قد ينزل تحت 3:1 مقابل الطرف الداكن، والقياس الناجح عند أحد الطرفين لا يخبرك شيئاً عن الآخر. اختبر لون النص مقابل الطرفين بـمدقّق التباين، وإن سقط أحدهما فالعلاج لوح صلب خلف النص لا لون نصّ مختلف.
الاقتصاد هو ما يجعل التدرّج يبدو معاصراً
التدرّجات التي تُقرأ معاصرة تكون خفيفة دائماً تقريباً: درجتان من الصبغة نفسها تفصلهما خطوات قليلة في الإضاءة، مطبَّقتان على سطح كبير. أما التي تُقرأ قديمة فعالية التباين، متعدّدة الصبغات، ومطبَّقة على عناصر صغيرة. وإن كانت لديك لوحة ألوان، فأسلم تدرّج هو بين درجتين متجاورتين من تدرّج اللون نفسه — يضيف عمقاً دون أن يعلن عن نفسه. وقاعدة تصمد أمام الواجهات الحقيقية: إن كان الزائر سيصف صفحتك بأنها «تلك التي فيها التدرّج»، فالتدرّج يفعل أكثر من اللازم.
الأداء وأين يُصرَّح به
تدرّج CSS يرسمه المتصفح بدل أن يُنزَّل، فلا يكلّف طلب شبكة ويبقى حادّاً بأي مقاس — وهي ميزة حقيقية على صورة الخلفية، وسبب لتفضيله في الخلفيات المسطّحة الكبيرة. لكن تحذيرين ينطبقان. تحريك التدرّج بتغيير محطّاته يفرض إعادة رسم في كل إطار وهو مكلف؛ حرّك `opacity` أو `transform` على طبقة تحمل التدرّج بدلاً من ذلك. وعلى عنصر كبير جداً، يكلّف تدرّج متعدّد المحطّات في الرسم أكثر من تدرّج بمحطّتين، وهذا يهمّ على الهواتف الأضعف حيث يكون زمن الرسم هو عنق الزجاجة.
أخطاء شائعة يجب تجنّبها
- الحكم على التدرّج من لونَي طرفيه. الطرفان يبدوان جيدين دائماً تقريباً؛ والفشل في المنتصف حيث يستنزف استيفاء sRGB التشبّع. انظر إلى المعاينة لا إلى العيّنتين.
- قبول منتصف رمادي بين صبغتين متباعدتين. أضف محطّة وسيطة على الصبغة التي تريد للانتقال أن يعبرها — فمحطّة واحدة تُنقذ معظم التدرّجات الباهتة.
- وضع نصّ فوق تدرّج واختبار طرف واحد. اشتراط التباين ينطبق على كل نقطة يعبرها النص؛ افحص الطرف الفاتح والداكن، وأضف لوحاً صلباً إن سقط أحدهما.
- استعمال تدرّج شعاعي خلفيةً لصفحة كاملة. يُقرأ تظليل حوافّ لا سطحاً؛ فالشعاعي للتوهّج خلف عنصر محوري، والخطي للخلفيات.
- تحريك محطّات الألوان. ذلك يعيد رسم التدرّج في كل إطار — حرّك الشفافية أو التحويل على طبقة بدلاً منه، فيستطيع المتصفح تركيبها بكلفة زهيدة.
كيف تُقارن
| KeroTools | أدوات مطوّري المتصفح | برامج التصميم | |
|---|---|---|---|
| معاينة حيّة أثناء التحرير | نعم | نعم، على صفحة حيّة | نعم |
| مخرَج CSS جاهز للنسخ | نعم | نعم | تقريبي غالباً |
| يعمل قبل البناء | نعم | لا — يحتاج صفحة معروضة | نعم |
| إرسال القيم إلى خادم | أبداً | لا | لا |
| حساب أو ترخيص | لا هذا ولا ذاك | لا هذا ولا ذاك | يتطلب ترخيصاً |
| التكلفة | مجاني | مجاني | مدفوع |
المزايا
تدرّجات خطية
أي زاوية بالدرجات، أو الاتجاهات الكلمية التي يقبلها CSS.
تدرّجات شعاعية
دائرية أو بيضاوية، مع تحكّم بموضع المركز.
محطّات ألوان متعدّدة
أدرِج ألواناً وسيطة وحدّد مواضعها بدقة على المحور.
معاينة حيّة
التدرّج يُرسم أثناء التعديل، فتظهر نقطة المنتصف الموحلة قبل أن تُنشر.
مخرَج CSS صالح
تصريح `background` كامل، لا شذرة عليك تركيبها.
إدخال ألوان HEX
الصق الرموز مباشرةً من وثيقة هوية أو لوحة ألوان.
بلا تثبيت
لا شيء يُنزَّل أو يُثبَّت — يعمل على صفحة الويب مباشرة.
يدعم العربية والاتجاه من اليمين
واجهة كاملة بثماني لغات، منها العربية بالاتجاه الصحيح.
آمن افتراضياً
عبر HTTPS، بلا تتبّع للملفات وبلا رفع لأي طرف ثالث.
من يستخدمها
مطوّرو الواجهات
الحصول على تصريح تدرّج صالح بلا كتابة الزوايا ومواضع المحطّات يدوياً.
المصمّمون
فحص كيف يُرسم انتقال بين لونين فعلاً قبل أن يصل إلى نموذج أوّلي.
كل من يخصّص قالباً
إنتاج خلفية لشريط رئيسي أو زرّ من لونَي هوية لديهم أصلاً.
المتعلّمون
رؤية ما يفعله تغيير الزاوية أو إضافة محطّة، بدل تخمين الصياغة.
الأسئلة الشائعة
لا. كل شيء يعمل محلياً في متصفحك — لا شيء يُرفع أو يُخزَّن أو يُشارَك.
نعم — مجاني تماماً، بلا حساب وبلا حدود.