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

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

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

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

١٠٠٪ محلي في المتصفح

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

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

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

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

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

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

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

50 px
px

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

#0f172a

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

النقطة المحددة حالياً

point-1

21 %
%

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

34 %
%

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

#2beeb3

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

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

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

1
2
3
4

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

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%);
filter: blur(50px);
دقة التصدير

تنزيل خلفية الشاشة بدقة عالية PNG

How CSS Mesh Gradients and Layered Radial Gradients Work

Mesh gradients create organic, fluid color transitions by blending multiple independent color nodes across a two-dimensional surface. Rather than restricting colors to linear or conical paths, mesh gradients distribute radial color fields from customized focal points with smooth transparent falloffs.

Mathematical Foundation of Seeded PRNG Generation

Deterministic generation uses a pseudo-random number generator (Mulberry32 PRNG) initialized with a 32-bit unsigned integer seed. Every execution with the same seed reproduces the exact spatial coordinates, color distributions, and layer hierarchies without variance:

s = (s + 0x6D2B79F5) >>> 0;
t = Math.imul(s ^ (s >>> 15), 1 | s);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;

Multi-Resolution Client-Side Canvas Rasterization

Exported PNGs are rendered directly on client-side HTML5 2D canvas surfaces at full device resolutions: 1080p Full HD (1920×1080), 2K Quad HD (2560×1440), and 4K Ultra HD (3840×2160). Because all rendering occurs strictly within your local browser sandbox without requesting external assets, exported canvases remain completely untainted and 100% private.

Frequently Asked Questions

كيف يتم إنشاء التدرج الشبكي عبر كود CSS خالص بدون صور جاهزة؟
يتم تشكيل التدرج عبر تراكب عدة طبقات من radial-gradient() مع نهايات شفافة فوق لون أساسي، ثم دمجها بتأثير التمويه filter: blur() الذي يقوم المتصفح بتصييره بسلاسة فائقة.
ما هو التوليد المحدد القائم على البذرة (Seeded Determinism)؟
تعتمد الأداة على خوارزمية Mulberry32 لتوليد أرقام شبه عشوائية مبنية على بذرة رقمية. إدخال نفس الرقم يعيد دائماً إنتاج نفس التوزيع الهندسي وتوافق الألوان بدقة متناهية.
هل يتم إنشاء خلفيات الشاشة بدقة 4K محلياً في جهازي؟
نعم. تتم معالجة ورسم التدرجات مباشرة عبر واجهة HTML5 Canvas المحلية بدقة تصل إلى 3840×2160 دون إرسال أو معالجة أي بيانات على خوادم خارجية.
هل يمكنني استخدام التدرجات الناتجة في مشاريع تجارية؟
بالتأكيد. جميع أكواد CSS والصور الناتجة مجانية تماماً ومفتوحة للاستخدام في المواقع والتطبيقات التجارية والشخصية.