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

ما هي مولّد تدرّجات CSS؟

مولّد تدرّجات CSS أداة مجانية داخل المتصفّح لمصمّمي الويب ومطوّري الواجهات الأمامية الذين يريدون بناء التدرّجات بصريًا بدل كتابة الصياغة يدويًا. اختر خطّيًا أو شعاعيًا أو مخروطيًا — مع صيغة متكرّرة اختيارية — ثم حرّر مواضع الألوان على شريط معاينة قابل للسحب أو في صفوف لكل موضع بحقول لون HEX وموضع. توفّر التدرّجات الشعاعية شكل دائرة/قطع ناقص، وكلمة مفتاحية للحجم (closest-side، closest-corner، farthest-side، farthest-corner) ومركزًا at X% Y%، بينما تأخذ المخروطية زاوية بداية ومركزًا. يمكنك تكديس عدّة طبقات تدرّج في خلفية واحدة مفصولة بفواصل، وتوليد تدرّج عشوائي، وتطبيق لوحات جاهزة، وتدوير درجة لون كل موضع، ونسخ قاعدة background الجاهزة للّصق.

كيفية استخدام مولّد تدرّجات CSS

1. اختر نوع التدرّج — خطّي أو شعاعي أو مخروطي — وفعّل «متكرّر» في الخيارات للحصول على نمط متكرّر.
2. اسحب المواضع على طول شريط المعاينة لإعادة ترتيبها، وانقر مكانًا فارغًا على الشريط لإضافة موضع، أو انقر نقرًا مزدوجًا على موضع لحذفه.
3. اضبط كل موضع بدقّة عبر حقلي لون HEX والموضع، أو استخدم القطّارة (حيث تُدعم) لالتقاط لون من شاشتك.
4. للتدرّجات الشعاعية اضبط الشكل (دائرة أو قطع ناقص)، وكلمة مفتاحية للحجم، والمركز X/Y؛ وللمخروطية زاوية البداية والمركز.
5. أضِف طبقات لتكديس التدرّجات في خلفية واحدة، وجرّب «عشوائي»، وطبّق لوحة، أو أدِر كل درجات اللون دفعة واحدة.
6. انسخ قاعدة CSS background المُولَّدة والصقها في ورقة الأنماط.

أمثلة

خطّي، 90deg، ‏#4f86f7 عند 0% و‏#9333ea عند 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

شعاعي، ellipse farthest-corner at 30% 30%، ‏#ffffff 0%، ‏#4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

الطبقة 1 خطّي 90deg؛ الطبقة 2 شعاعي circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

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

ما أنواع التدرّجات والخيارات المدعومة؟

تدرّجات خطّية وشعاعية ومخروطية، ولكلٍّ منها صيغة متكرّرة اختيارية. يضيف الشعاعي شكل دائرة/قطع ناقص، وكلمة مفتاحية للحجم (closest-side، closest-corner، farthest-side، farthest-corner) ومركزًا at X% Y%؛ ويضيف المخروطي زاوية بداية ومركزًا. كما يمكنك تكديس عدّة طبقات في خلفية واحدة.

كيف يعمل شريط المواضع القابل للسحب؟

اسحب أي موضع على طول الشريط لتغيير مكانه، وانقر جزءًا فارغًا من الشريط لإدراج موضع جديد بلون مُستكمَل، وانقر نقرًا مزدوجًا على موضع لحذفه (يُحتفَظ بموضعين على الأقل). كما أن لكل موضع حقلي لون HEX وموضع أسفل الشريط.

هل يمكنني التقاط لون من شاشتي؟

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

ماذا يفعل «عشوائي» واللوحات وتدوير درجة اللون؟

يستبدل «عشوائي» الطبقة النشطة بتدرّج عشوائي جديد، وتبدّل اللوحات مواضع الطبقة النشطة بمجموعة ألوان منتقاة، ويزيح «تدوير درجة اللون» درجة لون كل موضع في كل طبقة دفعة واحدة. وهي لا تغيّر التدرّج إلا عند النقر عليها.

هل تُرفَع ألواني أو CSS إلى أي مكان؟

لا. يُبنى التدرّج بالكامل داخل متصفّحك بحسابات محلّية للسلاسل النصّية والألوان — ولا تُرسَل أي ألوان أو CSS أو إعدادات إلى أي خادم على الإطلاق، فيعمل دون اتصال ويحافظ على خصوصية عملك.