مولّد تدرجات CSS
أنشئ تدرجات CSS جميلة بصرياً وانسخ الكود — خطي وشعاعي ومخروطي.
كود CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
تدرّجات CSS من أعلى الأدوات قيمةً في تصميم الويب: تُعرَض ككود صرف، فتتوسّع لأي حجم، وتكلّف صفرًا في وزن الملف، ولا تُضبَّب أبدًا — خلفية تدرّج ستكون ملف صورة ثقيلًا هي بدلًا بضعة أسطر CSS. لكن التركيب مُتعِب، والفرق بين التدرّجات الخطية والشعاعية والمخروطية سهل الخلط، وكتابة محطات الألوان يدويًا مُملّة. تتيح لك هذه الأداة بناء تدرّج بصريًا وتنسخ CSS نظيفًا جاهزًا للاستخدام، فتحصل على أداء ومرونة الكود دون مصارعة التركيب يدويًا.
كيف تعمل الأداة
اختر نوع تدرّج — خطي أو شعاعي أو مخروطي — اختر ألوانك ومواضع محطاتها، اضبط الزاوية أو المركز، وعاين النتيجة حيًّا. تولّد الأداة CSS المقابل، الذي تنسخه مباشرةً لورقة أنماطك. لأن التدرّج كود، المخرج يتوسّع لأي حجم عنصر دون صورة منفصلة، يبقى حادًا كالموس على كل كثافة شاشة، ويضيف جوهريًا لا شيء لوزن صفحتك. كل شيء يعمل في متصفحك.
أنواع التدرّج الثلاثة
linear-gradient(زاوية، لون1، لون2، ...)
الألوان تمتزج على طول خط مستقيم
135deg قطري شائع
radial-gradient(شكل at موضع، ألوان)
الألوان تمتزج خارجًا من نقطة مركز
conic-gradient(from زاوية at موضع، ألوان)
الألوان تجتاح حول مركز (شبه فطيرة)
محطات الألوان تضبط أين يهبط كل لون: 0%–100%.الأنواع الثلاثة تغطّي أعمالًا متمايزة. التدرّجات الخطية تمتزج على خط مستقيم بزاوية مختارة وهي حصان العمل للخلفيات والأزرار. التدرّجات الشعاعية تشعّ خارجًا من مركز، مثالية للأضواء الكاشفة والتوهّجات والفينييت الناعمة. التدرّجات المخروطية تجتاح حول نقطة مركز كوجه ساعة، وهو ما يجعلها مناسبة فريدًا لمخططات الفطيرة وعجلات الألوان ودوّامات التحميل المبنية بـCSS صرف. اختيار النوع الخطأ هو السبب المعتاد لعدم بدو تدرّج كما تخيّلت — كل شكل يمزج الألوان على مسار مختلف جوهريًا.
ما يجب معرفته عن تدرّجات CSS
- 1التدرّجات كود، فتتوسّع لانهائيًا ولا تزن شيئًا. خلافًا لتدرّج محفوظ كصورة، تدرّج CSS يُعرَض بأي حجم عنصر دون تضبيب، يضيف جوهريًا لا شيء لوزن الصفحة، ولا يحتاج طلب ملف منفصل. لأي امتزاج لون ناعم، CSS دائمًا تقريبًا الخيار الصحيح على صورة — أسرع وأحد ومرن بلا نهاية.
- 2تحكّم بمحطات الألوان لتشكيل الامتزاج، لا الألوان فقط. أين تضع كل محطة يحدّد كيف ينتقل التدرّج — محطات متقاربة تخلق خطًا حادًا، ومتباعدة تخلق تلاشيًا بطيئًا. محطتان لنفس اللون بمواضع مختلفة تخلقان شريطًا صلبًا. إتقان وضع المحطات هو ما يفصل تلاشيًا مسطّحًا بلونين عن تدرّج غني متعمّد.
- 3طبّق تدرّجات متعددة للعمق والملمس. CSS يتيح عدة تدرّجات مُكدَّسة كطبقات على عنصر واحد، مع الشفافية السامحة للطبقات الأدنى بالظهور. هكذا يبني المصممون خلفيات شبكية خفيّة وأنماطًا وتأثيرات إضاءة كليًا بـCSS — تدرّج مسطّح واحد مجرد نقطة البداية، لا السقف.
- 4أضف زاوية للاتجاه؛ الافتراضي قد لا يكون ما تتوقّعه. تدرّج خطي بلا زاوية يعمل من أعلى لأسفل؛ 90deg من يسار ليمين؛ 135deg يعطي القطري الشائع. إن بدا تدرّج موجّهًا خطأً، الزاوية دائمًا تقريبًا السبب. ضبطها صراحةً بدل الاعتماد على الافتراضي يتجنّب أشيع مفاجأة تدرّج.
- 5راقب التباين حيث يجلس نص على تدرّج. خلفية تدرّج قد تجتاز فحص تباين عند طرف وتفشل عند آخر، إذ اللون يتغيّر عبرها. نص فوق تدرّج يحتاج تباينًا كافيًا مقابل أفتح أو أغمق نقطة يتراكب عليها، لا المتوسط فقط، وإلا يصير غير مقروء في جزء من مساره — افحص أسوأ حالة، لا المنتصف.
الأسئلة الشائعة
ما الفرق بين التدرّجات الخطية والشعاعية والمخروطية؟
تمزج الألوان على مسارات مختلفة. تدرّج خطي ينتقل على خط مستقيم بزاوية تختارها — المعيار للخلفيات والأزرار. تدرّج شعاعي يشعّ خارجًا من نقطة مركز، مثالي للتوهّجات والأضواء الكاشفة والفينييت. تدرّج مخروطي يجتاح حول مركز كعقارب ساعة، ما يجعله مناسبًا فريدًا لمخططات الفطيرة وعجلات الألوان ودوّامات CSS. اختيار النوع المطابق للشكل الذي تريده الخطوة الأولى للنتيجة الصحيحة.
هل تدرّجات CSS أفضل من صور التدرّج؟
دائمًا تقريبًا، نعم. تدرّج CSS كود، فيتوسّع لأي حجم دون تضبيب، يضيف جوهريًا لا شيء لوزن صفحتك، لا يحتاج تنزيل ملف منفصل، ويمكن تحريره بتغيير سطر بدل إعادة تصدير صورة. تدرّج محفوظ كصورة أثقل، ثابت الدقة، ويُضبَّب حين التوسيع. ما لم تحتج ملمسًا أو تأثيرًا لا يستطيع CSS إنتاجه حقًا، تدرّج الكود يفوز على الأداء والحدّة والمرونة.
كيف تعمل محطات الألوان؟
محطة لون تضبط أين على طول التدرّج يهبط لون معين، كنسبة من 0% لـ100% أو طول. وضع المحطات متقاربة يصنع انتقالًا حادًا بين الألوان؛ وتباعدها يصنع تلاشيًا بطيئًا سلسًا. تكرار نفس اللون عند موضعين يخلق شريطًا صلبًا منه. التحكّم بالمحطات، لا مجرد اختيار الألوان، هو ما يتيح لك تشكيل كيف وأين ينتقل التدرّج بالضبط.
لماذا تدرّجي يذهب في الاتجاه الخطأ؟
دائمًا تقريبًا الزاوية. تدرّج خطي بلا زاوية محدّدة يفترض العمل من أعلى لأسفل، ما يفاجئ من يتوقّع امتزاجًا قطريًا أو أفقيًا. اضبط الزاوية صراحةً — 90deg ليسار-ليمين، 135deg للقطري الشائع — للتحكّم بالاتجاه. إن بدا اتجاه تدرّج خاطئًا، إضافة أو تصحيح قيمة الزاوية دائمًا تقريبًا الإصلاح، إذ الافتراضي نادرًا الاتجاه الذي يقصده الناس.
هل أستطيع استخدام تدرّجات خلف نص؟
نعم، لكن افحص التباين بعناية، لأن لون الخلفية يتغيّر عبر التدرّج. نص مقروء فوق الطرف الفاتح قد يصير غير مقروء فوق الطرف الداكن، إذ تدرّج واحد يمتد عبر نطاق ألوان. تحقّق أن نصك له تباين كافٍ مقابل أصعب نقطة يتراكب عليها — أفتح أو أغمق منطقة تحته — بدل افتراض أن المتوسط آمن. لنص طويل، تدرّج أخفّ أو تراكب صلب خلف النص غالبًا أأمن.