مولّد التدرجات اللونية الفاخرةMesh & Grainy Gradients Builder
اصنع تدرجات لونية سائلة وشبكية ومتحركة بملمس النويز السينمائي الفاخر (Film Grain). صدّر كود CSS خالص، أو انسخ فيكتور SVG حياً لبرنامج Figma، أو حمّل خلفيات بدقة 4K فائقة.
background-color: #021A0E; background-image: radial-gradient(circle at 25.0% 25.0%, #006C35 0%, transparent 55%), radial-gradient(circle at 75.0% 25.0%, #D4AF37 0%, transparent 50%), radial-gradient(circle at 30.0% 75.0%, #0F4C2A 0%, transparent 50%), radial-gradient(circle at 80.0% 80.0%, #E6CA65 0%, transparent 55%), radial-gradient(circle at 50.0% 50.0%, #021A0E 0%, transparent 45%);
دليل المصممين: أسرار استخدام تدرجات Mesh و Grainy في الهوية البصرية 2026
التدرجات اللونية الشبكية (Mesh Gradients) وتأثير الحبيبات السينمائية (Grainy Aesthetic) ليسا مجرد خلفيات عابرة؛ بل هما لغة بصرية تمنح المنتجات الرقمية والشركات عمقاً ملموساً وفخامة استثنائية تميزها عن القوالب الباهتة المسطحة.
تدرجات سائلة بلا تكتل
تحكم بنصف قطر كل نقطة ونعومة البلور لخلق توزيع لوني متوازن لا يجهد عين القارئ عند وضع نصوص بيضاء أو شعارات أمامه.
ملمس النويز (Film Grain)
إضافة 25% إلى 40% من النويز يكسر تدرج الألوان المتكرر ويمنع عيوب الـ Color Banding في شاشات الموبايل الرخيصة، مانحاً إحساس الطباعة الفاخرة.
تكامل مباشر مع Figma
كود SVG المنسوخ مهيأ بالكامل ليتعرف عليه فيجما كطبقات وVector Fills قابلة للتعديل وتغيير الأحجام دون أي فقدان في الجودة.
الأسئلة الشائعة حول مولد التدرجات
كيف ألصق التدرج في برنامج فيجما (Figma) كطبقات قابلة للتعديل؟
ببساطة اضغط على زر 'نسخ لـ Figma 🎨'، ثم افتح ملفك في فيجما واضغط Ctrl + V (أو Cmd + V على ماك). سيتم لصق التدرج فوراً كإطار SVG يحتوي على أشكال التدرج الشعاعية وفلتر البلور.
ما هي الدقة التي يتم تصدير صور PNG بها؟
يتم تصدير الصور بدقة فائقة تصل إلى 4K UHD (3840 × 2160 بكسل بنسبة 16:9، أو 3000 × 3000 بكسل بنسبة 1:1)، مما يجعلها ممتازة كخلفيات شاشات، ومطبوعات، وبوسترات عملاقة دون أي بكسلة.
هل كود CSS المولد متوافق مع كافة المتصفحات وهواتف الموبايل؟
نعم، الكود المولد يعتمد على معايير الـ W3C القياسية لخاصية radial-gradient مع لون أساسي بديل (Fallback background-color) لضمان ظهوره بسلاسة تامة على متصفحات Chrome و Safari و Firefox و Edge.
هل الأداة مجانية وتسمح بالاستخدام التجاري؟
نعم 100%! الأداة مجانية بالكامل لجميع المصممين وأصحاب الأعمال، ولا نضع أي علامة مائية (Watermark) على الصور أو الملفات المصدرة، وتستطيع استخدام النتائج في مشاريعك التجارية بحرية.