ما هو مولّد التدرجات الشبكية؟

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

تضع اللوحة عدّة تدرّجات شعاعية فوق بعضها، واحدًا لكل نقطة تحكّم. اسحب نقطة لإعادة تشكيل المزج، وبدّل لونها عبر عيّنة اللون، ويتحدّث الكود مباشرة. تُبقي ست نقاط كحد أقصى النتيجة متوازنة. صدّر التدرّج كملف PNG أو SVG بأحجام لافتات مثل 1920x1080، أو الصق SVG مباشرة في Figma، أو خذ الكود بصيغة CSS أو SCSS أو Tailwind.

كيفية الاستخدام

1. اختر ألوانك الأساسية بالنقر على عينات الألوان أو إدخال قيم hex. أضف حتى 6 نقاط تحكم لونية.
2. اسحب نقاط التحكم على اللوحة لتغيير اتجاه التدرج.
3. انسخ الكود بصيغة CSS أو SCSS أو Tailwind، أو نزّل التدرّج كملف PNG أو SVG.

متى تستخدم

• تصميم خلفية صدر صفحة لا تبدو وكأنها قالب جاهز.
• صناعة أغلفة لبطاقات منتجات أو قوائم تشغيل تحتاج لوناً بلا صورة.
• إنتاج خلفيات لشاشات التحميل والحالات الفارغة في التطبيقات.

النتيجة

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

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

ما الفرق بين تدرّج شبكي وتدرّج خطّي؟

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

لماذا يستخدم CSS الناتج radial-gradient وليس conic-gradient؟

التدرّجات الشعاعية المركّبة لها أعرض دعم في المتصفّحات وتتدرّج بشكل نظيف. المولّد يُخرج تدرّجاً شعاعياً لكل نقطة تحكم ويركّبها عبر background-image، فيعمل في كل متصفّح حديث دون polyfill.

هل سيبدو التدرّج نفسه في Safari وChrome؟

نعم. الناتج يستخدم radial-gradient القياسي من CSS بلا بادئات. Safari وChrome وFirefox وEdge جميعها ترسم نتيجة متطابقة. المتصفّحات القديمة جداً تكتفي بأول لون.

كم نقطة تحكم يمكنني استخدامها؟

حتى ستّ نقاط. إضافة المزيد تجعل المزج عكراً عادةً، لا أغنى. نقطتان أو ثلاث تُعطي تدرّجات نظيفة بطابع زخرفي، وأربع إلى ست تُعطي مسحات أقرب إلى الرسم اليدوي.

هل يمكن تصدير التدرّج كـ SVG؟

نعم. يبني تصدير SVG التدرّج من طبقات radial-gradient متراكمة، لذا يظهر في كل مكان تعمل فيه تدرّجات CSS ويُلصَق مباشرة في Figma كتعبئة لشكل. أمّا تدرّج الشبكة SVG الحقيقي وفق المواصفة فلا يحظى بأي دعم حتى الآن في أي مكان، ولهذا فإن هذا الأسلوب المتراكم هو النسخة التي تعمل فعلاً أينما لصقتها.

أدوات ذات صلة