مولّد تدرجات CSS

ما مولّد تدرّجات CSS؟#

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

هذه الصفحة ورشة عمل حيّة لذلك. تسحب النقاط، وتُزلِق الزاوية، وتبدّل بين خمسة أنواع تدرّج، وتُصدِر الصفحة إعلان linear-gradient(...) (أو radial- أو conic- أو المتكرّر) بالضبط الذي يحتاجه ملف أنماطك — بالإضافة إلى مقتطف Tailwind v4 @theme جاهز للّصق يحوّل كلّ لون إلى رمز قابل لإعادة الاستخدام.

كيف تستخدمها#

1. اختر نوع التدرّج:
   • خطيّ — انتقال الألوان على خطّ مستقيم بزاوية مختارة. الافتراضيّ؛ يغطّي معظم حالات الاستخدام.
   • شعاعيّ — تشعّ الألوان للخارج من نقطة مركز. جيّد للأضواء الساطعة والتظليل المتلاشي.
   • مخروطيّ — تكتسح الألوان حول مركز كرسم بياني دائريّ. مفيد لعجلات الألوان وخلفيات الدوّارات.
   • خطيّ متكرر / شعاعيّ متكرر — التدرّج نفسه مُبلَّط، فيُنتج خطوطًا أو حلقات متّحدة المركز.
2. للأنواع الخطّية والمخروطية، اسحب شريط الزاوية (0–359°). تتحدّث المعاينة حيًّا؛ 0° يشير لأعلى، و90° يشير لليمين، و135° هو القطر الكلاسيكيّ من أعلى اليسار إلى أسفل اليمين.
3. للأنواع الشعاعية، اختر شكلًا — دائرة أو قطع ناقص (الافتراضيّ لخلفيات كاملة النزيف متجاوبة).
4. أدر نقاط اللون:
   • لكلّ نقطة عيّنة لون وموضع على شريط التدرّج (0–100%).
   • اسحب المقابض على الشريط لتحريك نقطة، أو اكتب موضعًا دقيقًا.
   • انقر إضافة نقطة لإدراج واحدة جديدة؛ انقر × على نقطة لحذفها.
   • يحتاج التدرّج إلى نقطتين على الأقلّ.
5. اقرأ الناتجين في الأسفل: CSS (قيمة التدرّج الخام) وTailwind v4 (كتلة @theme تُسجِّل كلّ لون كرمز --color-grad-*، بالإضافة إلى أداة .bg-gradient تستهلكها). استخدم زرّ النسخ بجانب كلّ واحد.

أبرز المزايا#

• خمسة أنواع تدرّج في أداة واحدة. خطّي وشعاعي ومخروطيّ وكلا المتغيّرين المتكرّرَين — بدّل دون إعادة إدخال الألوان.
• معاينة حيّة دقيقة بالبكسل. الكتلة الكبيرة على اليمين هي التدرّج الفعليّ الذي ستُسلّمه؛ ما تراه هو ما يحصل عليه ملف أنماطك.
• شريط نقاط بمقابض سحب. أعد وضع أيّ نقطة لون بسحبها؛ تُحدَّث النسبة المئوية وأنت تُحرّك.
• ناتج مزدوج. CSS خامّ لملفات الأنماط المكتوبة يدويًّا، ومقتطف Tailwind v4 @theme (كلّ نقطة تصبح رمز --color-grad-*، تستهلكه أداة .bg-gradient) للمشاريع ذات الأدوات أولًا — كلاهما متزامن دائمًا.
• قراءة الزاوية. تُعرض الدرجة بالضبط بجانب شريط التمرير، فتستطيع إعادة إنتاج تدرّج بدقّة في مكان آخر.
• صفر رفع. الألوان والنقاط والزاوية لا تغادر المتصفّح.

مثال عملي#

لنفترض أنّك تريد تدرّج علامة تجارية هادئًا مائلًا قليلًا يذهب من النيليّ إلى الأخضر المائل للزرقة. اختر خطيّ، واضبط الزاوية على 135°، واستخدم نقطتين:

• النقطة 1: #4F46E5 عند 0% (نيليّ)
• النقطة 2: #0D9488 عند 100% (أخضر مائل للزرقة)

ناتج CSS هو:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

ومقتطف Tailwind v4 هو:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

بدلًا من تضمين قيم hex، يُسجِّل ناتج Tailwind كلّ نقطة كرمز تصميم --color-grad-* داخل @theme، ثم يُشير بأداة .bg-gradient واحدة إليها عبر var(...). غيّر متغيّرًا واحدًا ويتحدّث كلّ مكان يستهلكه دفعة واحدة. تريد لونًا ثالثًا أنعم في الوسط؟ انقر إضافة نقطة، واضبط #7C3AED عند 50%، فيُنمو المقتطف برمز --color-grad-2: #7C3AED بينما يتراجع الأخضر المائل للزرقة إلى --color-grad-3 — تُعاد تسمية النقاط دائمًا حسب الموضع، فلا تخرج الأسماء عن التزامن مع الشريط.

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

ما الفرق بين خطّي وشعاعيّ ومخروطيّ؟#

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

لماذا يُعرِّف ناتج Tailwind متغيّرات --color-grad-* بدلًا من تضمين الألوان؟#

نقلت Tailwind v4 الإعداد إلى CSS عبر كتلة @theme، حيث يصبح كلّ مدخل رمز تصميم قابلًا لإعادة الاستخدام. بإصدار كلّ نقطة كـ --color-grad-1 و--color-grad-2، … وجعل .bg-gradient يشير إليها عبر var(...)، يُسلِّمك المقتطف لوحة ألوان تُعيد استخدامها في أيّ مكان — الحدود، النصّ، الظلال — لا هذه الخلفية فقط. حرِّر متغيّرًا واحدًا ويتحدّث كلّ مستهلك دفعة واحدة. (في Tailwind v3 لا يوجد @theme؛ ألصق ناتج CSS في ملف أنماطك بدلًا من ذلك.)

هل أستطيع عمل خطّ لون صلب بدل مزج سلس؟#

نعم. أعطِ نقطتين الموضع نفسه — مثلًا #000 50% و#fff 50%. بلا مسافة بينهما، يصبح للمزج عرض صفريّ، فيتحوّل الانتقال إلى خطّ صلب. هكذا تبني خلفيات مخطّطة أو محزّزة دون صورة.

التدرّج المخروطيّ يبدو مدارًا مقارنة بأداة التصميم خاصّتي. لماذا؟#

تقيس الأدوات المختلفة زاوية البدء لتدرّج مخروطيّ بشكل مختلف. يقيس CSS زاوية from مع عقارب الساعة من الأعلى (الساعة 12). إن كانت أداة التصميم خاصّتك تقيس من اليمين (الساعة 3) أو عكس عقارب الساعة، اطرح أو أضف 90° (أو اقلب الإشارة) حتى تطابق المعاينة.