مولّد التدرج الشبكي
اختر عدد نقاط التحكم
تنتج النقاط الإضافية مناطق لونية أكثر. عند تغيير الشبكة تُحفظ الألوان الحالية قدر الإمكان.
أنشئ خلفية ناعمة متعددة الألوان من 4 أو 6 أو 9 نقاط قابلة للتحريك. اختر لون كل نقطة، واسحب النقاط فوق مساحة المعاينة، وجرّب لوحة عشوائية منتقاة، ثم صدّر النتيجة بصيغة SVG أو PNG. يمكنك أيضًا نسخ تقريب بتنسيق CSS مكوّن من تدرجات شعاعية متراكبة. يبقى مشروعك في علامة تبويب المتصفح هذه أثناء العمل.
كيفية إنشاء تدرج بمظهر شبكي
-
1
اختر الشبكة
ابدأ بـ4 أو 6 أو 9 نقاط تحكم. كلما زاد عدد النقاط زادت مناطق الألوان المميزة.
-
2
اختر الألوان
استخدم منتقي اللون لكل نقطة. يحفظ المحرر ألوان HEX من ست خانات.
-
3
حرّك النقاط
اسحب النقطة، أو أدخل موضعها الأفقي والرأسي، أو استخدم مفاتيح الأسهم.
-
4
اختر المقاس
اختر مقاسًا أفقيًا أو عريضًا أو مربعًا لملفي SVG وPNG.
-
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، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)
إزالة التشفير من كود جافا سكريبت مُصغَّر أو مُعبَّأ باستخدام إعادة تسمية المتغيرات، وفك ترميز السلاسل النصية ومصفوفات البيانات، بالإضافة إلى عكس تسطيح تدفق التحكم وتحسين هيكله.
مولد تراخيص
قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.
مولّد إعدادات Nginx
أنشئ كتل server في Nginx مع TLS وHTTP/2 وgzip والتخزين المؤقت في المتصفح وقواعد الوكيل العكسي، انطلاقًا من نموذج بسيط.
مولد ملف tsconfig.json
أنشئ ملف tsconfig.json نظيفا باختيار target وmodule وmoduleResolution وJSX وأعلام الصرامة الشائعة، ثم انسخ الإعداد المولّد إلى مشروعك.
الأداة متاحة بلغات أخرى
- Generator gradientu siatkowego [PL]
- Generator för nätgradienter [SV]
- Mesh-Verlauf-Generator [DE]
- Pembuat gradasi mesh [ID]
- メッシュグラデーション生成ツール [JA]
- Gerador de gradiente em malha [PT]
- เครื่องมือสร้างเกรเดียนต์แบบตาข่าย [TH]
- Trình tạo chuyển màu dạng lưới [VI]
- 메시 그라데이션 생성기 [KO]
- Generador de degradados de malla [ES]
- Générateur de dégradés en maillage [FR]
- Meshverloopgenerator [NL]
- Mesh Gradient Generator [EN]
- Generatore di sfumature a maglia [IT]
- Генератор сетчатого градиента [RU]
- Ağ gradyan oluşturucu [TR]
- 网格渐变生成器 [ZH]