0

مولد أنماط الخلفيات بـ CSS

اصنع خلفيات قابلة للتكرار من الخطوط والنقاط ورقعة الشطرنج والشبكة والتظليل المتقاطع المائل والمثلثات باستخدام تدرجات CSS حقيقية متعددة الطبقات — دون أي صور — أو صدّر النمط نفسه كتعريف SVG <pattern> للاستخدام داخل مستندات SVG.

🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.

20px
45°
جارٍ المعالجة... 0%

النتيجة

معظم أدوات "توليد الأنماط" تعيد استخدام صيغة التدرج الخطي المتكرر نفسها بهدوء لكل خيار وتغير الأرقام فحسب. هذه الأداة لا تفعل ذلك: كل نوع من أنواع الأنماط الستة هنا مبني بتقنية CSS المحددة التي تُنتج ذلك الشكل فعليًا. الخطوط تستخدم تدرجًا خطيًا متكررًا واحدًا بشريطي لون. النقاط تستخدم تدرجًا شعاعيًا واحدًا يُكرر عبر background-size فحسب — خدعة نقاط CSS الكلاسيكية — بدلًا من التدرج الشعاعي المتكرر، الذي لا يمكنه تكرار نقطة دائرية بنظافة على شبكة مستطيلة. رقعة الشطرنج تستخدم صيغة التدرج المخروطي رباعي الأرباع الحقيقية: تدرج مخروطي متمركز في بلاطة مربعة ينقسم طبيعيًا إلى أربعة أرباع مربعة عند حدود 90 درجة، وتبديل لونين عبر هذه الأرباع يُنتج رقعة شطرنج حقيقية، وليس تقريبًا.

الشبكة والتظليل المتقاطع المائل كلاهما يضع طبقتين من التدرجات الخطية المتكررة كمدخلين منفصلين في background-image بدلًا من تزييف الاتجاه الثاني بحيل الحدود. الشبكة تجمع بين تدرج متكرر "إلى اليمين" وآخر "إلى الأسفل" لخطوط أفقية وعمودية حادة. التظليل المتقاطع يضع طبقة من تدرج متكرر بزاوية +45 درجة وأخرى بزاوية -45 درجة لنسيج قطري يشبه السلال — يجدر التدقيق هنا: هذا تظليل متقاطع فعلي، وليس هندسة متعرجة حقيقية، والأداة تصفه بذلك بدلًا من الادعاء بأكثر مما هو. المثلثات تعيد استخدام تقنية التدرج المخروطي رباعي الأوتاد لرقعة الشطرنج لكنها تبدأ التدرج مدورًا 45 درجة، مما ينقل حدود الأوتاد من منتصفات حواف البلاطة إلى زواياها ويحول الأوتاد الأربعة نفسها إلى أربعة مثلثات من الزاوية إلى الزاوية بدلًا من أربعة أرباع مربعة.

كل نوع نمط يُظهر فقط عناصر التحكم التي تنطبق عليه فعليًا — يظهر منزلق الزاوية للخطوط، ونصف قطر النقاط والتباعد للنقاط، وسُمك الخط للشبكة والتظليل المتقاطع — وصندوق المعاينة المكرر الكبير يُعاد رسمه مع كل تغيير لتتمكن من رؤية عدة تكرارات كاملة قبل اعتماد أي قيمة. اقلب وضع الإخراج إلى SVG ليظهر النمط نفسه كعنصر <pattern> مبني من عناصر rect أو circle أو path أو polygon الأولية، جاهز للصق داخل <defs> في أي مستند SVG، مع تحميل بنقرة واحدة لملف .svg مستقل.

كل شيء يعمل محليًا في متصفحك: لا رفع للصور، ولا اتصال بالخادم، ولا حساب. للخلفيات الصلبة أو المتدرجة بدون تكرار، أداة توليد التدرجات CSS على هذا الموقع هي الأنسب بدلًا من هذه؛ هذه الأداة مخصصة للخلفيات الهندسية القابلة للتكرار والمبنية دون أي أصول صور.