مولّد Mesh Gradient

ما هو مولّد Mesh Gradient؟

ينشئ مظهر «mesh gradient» الناعم الشائع بـ CSS عادية: لون خلفية وعدة تدرجات دائرية، يبدأ كل منها عند نقطة لونية ويتلاشى إلى الشفافية. تضع حتى ثماني نقاط بسحبها في المعاينة أو بكتابة مواضعها.

كيفية استخدام مولّد Mesh Gradient

1. اختر لون الخلفية.
2. حدّد نقطة لونية واضبط لونها والانتشار والموضع X / Y، أو اسحب النقطة في المعاينة.
3. أضف نقطة / احذف نقطة لتغيير عدد الألوان الممزوجة (1–8).
4. انقر عشوائي لمزيج جديد، أو أدخل Seed واضغط تطبيق للحصول على مزيج قابل لإعادة الإنتاج.
5. انسخ كود CSS.

مثال

Default 4 points, background #ff99cc

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

متى تستخدم مولّد Mesh Gradient

استخدمه لخلفيات الواجهة الرئيسية وصفحات الهبوط وشاشات بدء التطبيقات وخلفيات الألوان الضبابية خلف بطاقات glassmorphism. وإن احتجت انتقالات لونية مستقيمة دقيقة فاستخدم مولّد تدرج CSS؛ وللتشويه الحقيقي للشبكة تحتاج أداة متجهات أو مظلل canvas/WebGL.

كيف يعمل مولّد Mesh Gradient

تصبح كل نقطة radial-gradient(at x% y%, color 0, transparent spread%) وتُسرد جميعها في background-image فوق background-color. ولأن كل تدرج يتلاشى إلى الشفافية فإن الألوان تتداخل وتمتزج بسلاسة. يستخدم العشوائي مولد أرقام شبه عشوائية ببذرة (mulberry32): فالبذرة نفسها وعدد النقاط نفسه ينتجان دائماً الألوان والمواضع نفسها. وهذا تقريب لتدرجات mesh الحقيقية (التي لا توجد في CSS) وليس شبكة رقعة ثنائية الخطية.

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

• ✓ خلفيات الواجهة الرئيسية لصفحات الهبوط
• ✓ خلفيات لبطاقات glassmorphism
• ✓ عناصر نائبة ملونة لأغلفة المدونة
• ✓ شاشات تعريف التطبيق
• ✓ خلفيات قابلة لإعادة الإنتاج عبر seed في أنظمة التصميم

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

استكشف المزيد من الفئات