الانتقال إلى المحتوى الرئيسي
FreeKitX

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

احفظ الأداة في الإشارات المرجعية

احفظ هذه الصفحة في متصفحك

على الهاتف، اختر إضافة إشارة مرجعية من قائمة المشاركة أو قائمة المتصفح.

إنشاء تدرجات لونية شبكية جذابة بنقاط تحكم قابلة للسحب وتصدير صور 4K وكود CSS.

مولد التدرجات الشبكية وخلفيات الشاشة الانسيابية

مجاني · معالجة محلية

أنشئ تدرجات شبكية ناعمة مع نقاط تحكم تفاعلية، توليد عشوائي محدد، وتصدير صور بدقة 4K.

لوحة التدرج التفاعلية المباشرة
معاينة حية

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

1
2
3
4

قوالب التصميم الجاهزة

إعدادات التدرج الشبكي

تحكم في البذرة العشوائية، نقاط التوجيه، التمويه ولون الخلفية بشكل فوري.

عدد نقاط التحكم: 4 / 6

يلزم وجود 4 نقاط تحكم على الأقل.

#2beeb3
#0f172a
50 px
px

اضبط شدة الضبابية للحصول على انتقالات أكثر سلاسة بين نقاط الألوان.

الإعدادات المتقدمة

استخدم بذرة رقمية لإعادة إنشاء نفس التدرج بشكل دقيق.

النقطة المحددة حالياً: point-1
21 %
%
34 %
%

تصدير الكود وتنزيل الصور

نوع CSS

إعلانات خلفية قياسية بدون تعتيم تصفية. آمن تماماً لأي عنصر أو حاوية.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

أدوات ذات صلة

الإجابة المباشرة

التدرج الشبكي (Mesh Gradient) هو تأثير بصري عصري يمزج عدة نقاط لونية شعاعية عبر مساحة ثنائية الأبعاد، مما ينتج تدرجات انسيابية عضوية متعددة الألوان دون قيود خطية ثابتة.

كيفية استخدام هذه الأداة

1

تحديد مواقع نقاط الألوان والأنماط الجاهزة

اسحب من 4 إلى 6 نقاط تحكم على مساحة التصميم أو اختر نمطاً جاهزاً لضبط التوزيع اللوني الأساسي.

2

ضبط النعومة وبذرة التوليد العشوائي

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

3

نسخ كود CSS أو تصدير خلفية الشاشة

انسخ إعلانات الخلفية الخفيفة، أو احصل على قاعدة CSS المعزولة، أو حمّل صور PNG عالية الدقة حتى 4K.

آلية تنفيذ التدرج الشبكي عبر CSS: الخلفية فقط مقابل كود CSS كامل

يتم رسم التدرجات الشبكية الأصلية في المتصفح عبر تراكب طبقات متعددة من دالة radial-gradient() فوق لون أرضية موحد. يوفر نمط «الخلفية فقط» إعلانات خلفية قياسية دون مرشحات تمويه على العنصر، مما يجعله آمناً تماماً لأي حاوية أو تخطيط. بينما يطبق نمط «CSS كامل» مرشح التمويه على عنصر زائف ::before معزول مع هوامش ممتدة، مما يضمن بقاء النصوص والروابط والأزرار الفرعية حادة وواضحة وقابلة للتفاعل.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • الخلفية فقط: تدرجات شعاعية متراكبة خفيفة الوزن وخالية من مرشحات التمويه؛ آمنة تماماً لأي عنصر.
  • كود CSS كامل: عنصر زائف ::before معزول بمرشح تمويه؛ تظل العناصر الفرعية واضحة وقابلة للنقر.
  • بذرة قطعية: خوارزمية Mulberry32 PRNG تضمن إعادة إنتاج نفس التوزيع اللوني والإحداثيات بدقة مطلقة.

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

كيف تعمل التدرجات الشبكية باستخدام CSS النقي دون تحميل أي صور؟

تعتمد على تراكب عدة طبقات من دالة radial-gradient() مع نقاط توقف شفافة فوق لون أساسي. يقوم محرك رسوميات المتصفح بدمج الحواف الشفافة المتداخلة لإنتاج تأثير لوني انسيابي وطبيعي.

ما الفرق العملي بين نمطي «الخلفية فقط» و «CSS كامل»؟

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

ما هي اعتبارات الأداء والقيود التقنية في المتصفحات؟

قد يؤدي تراكم العديد من التدرجات الشعاعية مع مرشحات تمويه قوية إلى زيادة جهد إعادة الرسم أثناء التمرير السريع على الهواتف ذات المعالجات الرسومية المحدودة. كما أن تصدير صور 4K يتم محلياً عبر Canvas وقد يتطلب ثوانٍ معدودة على الأجهزة القديمة.

هل يتم رفع التدرجات أو الصور المصدرة إلى أي خادم خارجي؟

لا على الإطلاق. تتم جميع الحسابات الرياضية، توليد البذور العشوائية، إنشاء كود CSS ورسم صور Canvas محلياً بنسبة 100% داخل ذاكرة متصفحك.

المراجع والمعايير المعتمدة