Softonic

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

أنشئ خلفية ناعمة متعددة الألوان من 4 أو 6 أو 9 نقاط قابلة للتحريك. اختر لون كل نقطة، واسحب النقاط فوق مساحة المعاينة، وجرّب لوحة عشوائية منتقاة، ثم صدّر النتيجة بصيغة SVG أو PNG. يمكنك أيضًا نسخ تقريب بتنسيق CSS مكوّن من تدرجات شعاعية متراكبة. يبقى مشروعك في علامة تبويب المتصفح هذه أثناء العمل.

كيفية إنشاء تدرج بمظهر شبكي

  1. 1

    اختر الشبكة

    ابدأ بـ4 أو 6 أو 9 نقاط تحكم. كلما زاد عدد النقاط زادت مناطق الألوان المميزة.

  2. 2

    اختر الألوان

    استخدم منتقي اللون لكل نقطة. يحفظ المحرر ألوان HEX من ست خانات.

  3. 3

    حرّك النقاط

    اسحب النقطة، أو أدخل موضعها الأفقي والرأسي، أو استخدم مفاتيح الأسهم.

  4. 4

    اختر المقاس

    اختر مقاسًا أفقيًا أو عريضًا أو مربعًا لملفي SVG وPNG.

  5. 5

    صدّر التصميم

    نزّل PNG أو SVG، أو انسخ تقريب CSS المكوّن من تدرجات شعاعية.

طريقة إنشاء المخرجات الثلاثة

  • PNG يستخدم طريقة المزج بحسب المسافة نفسها المستخدمة في المعاينة. وإذا اخترت نسبة أبعاد مختلفة، تُرسم النقاط النسبية نفسها داخل المقاس الجديد.
  • SVG يضع تدرجات شعاعية متراكبة عند نقاط التحكم نفسها، ويحافظ على الوضوح عند التكبير.
  • CSS ينشئ طبقة radial-gradient() لكل نقطة فوق لون أساسي، من دون ملف صورة منفصل.

يستخدم SVG وCSS بيانات المشروع نفسها، لكنهما تقريبان خفيفان للمظهر الشبكي. لذلك لن تتطابق وحدات البكسل مع معاينة PNG تمامًا.

إرشادات اختيار الألوان

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

تحديد مواضع النقاط

اسحب نقطة مرقمة في المعاينة، أو انقل التركيز إليها واستخدم مفاتيح الأسهم. اضغط Shift مع السهم لتحريكها خمس نقاط مئوية. كما تتيح حقول الموضع الأفقي والرأسي إدخالًا دقيقًا.

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

استخدامات شائعة

  • خلفيات العناوين وفواصل الأقسام.
  • صور الشبكات الاجتماعية والصور المصغرة للفيديو.
  • خلفيات العروض التقديمية والرسوم.
  • شاشات البدء واللوحات الزخرفية.

تطابق صيغة PNG المعاينة بأكبر دقة. استخدم SVG عند الحاجة إلى تكبير واضح، أو CSS لخلفية قابلة للتعديل من دون صورة منفصلة.

الخصوصية والتخزين

تبقى الألوان والمواضع والدقة في ذاكرة المتصفح وفي sessionStorage. لا تُضاف إلى روابط مسار الأداة ولا إلى حالة الخادم. قد تسجّل الأداة حدوث عملية تصدير من دون تضمين قيم المشروع.

يمكن استعادة المشروع من sessionStorage لمدة أقصاها ست ساعات ما دامت علامة التبويب الحالية مفتوحة. يؤدي إغلاقها غالبًا إلى حذفه قبل ذلك، لذا نزّل أو انسخ ما تريد الاحتفاظ به.

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

تستخدم طرق عرض مختلفة. يمزج PNG وحدات البكسل بحسب المسافة، بينما يكدّس SVG وCSS تدرجات شعاعية. الألوان والمواضع واحدة، لكن وحدات البكسل ليست متطابقة.

نعم. اسحب النقطة، أو استخدم حقول الموضع، أو انقل التركيز إليها واضغط مفاتيح الأسهم. اضغط Shift للحركة بخطوات أكبر.

يحفظ المحرر ألوان HEX من ست خانات. استخدم منتقي اللون أو حوّل RGB أو HSL إلى HEX أولًا.

لا. يقرّب CSS المنسوخ التأثير عبر تكديس تدرجات شعاعية قياسية.

يمكن استعادته من sessionStorage لمدة أقصاها ست ساعات في علامة التبويب الحالية. يؤدي إغلاقها عادة إلى حذفه قبل ذلك. لا يُرسل المشروع عبر خوادمنا ولا يُضاف إلى روابط المسار.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

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

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى