تصميم / CSS

مولّد أنماط CSS (خطوط، نقاط، شبكة، رقعة شطرنج)

أنشئ أنماط خلفية متكررة باستخدام تدرجات CSS فقط: خطوط، وخطوط مائلة، وخطوط شبكة، ونقاط منقطة، ورقعة شطرنج، ومتعرج، مع اختيار اللونين والحجم وسُمك الخط، ثم انسخ CSS.

مولّد أنماط CSS (خطوط، نقاط، شبكة، رقعة شطرنج): يتكوّن كل نمط من تدرج CSS واحد أو تدرجين يتكرران بالحجم الذي تختاره: يستخدم repeating-linear-gradient للخطوط، وتدرجين خطيين متقاطعين للشبكة، وradial-gradient للنقاط، وrepeating-conic-gradient لرقعة الشطرنج. لا يُستخدم أي ملف صورة، لذلك يظل النمط واضحًا عند أي مستوى تكبير، ولا يستهلك شيئًا عند التحميل. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد أنماط CSSمعالجة محلية

تعمل بالكامل في المتصفح

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

يُرسَم كل نمط باستخدام تدرجات CSS فقط، لذلك لا توجد صورة لتنزيلها، ويظل النمط واضحًا عند أي تكبير، ويمكن تغيير الألوان في ورقة الأنماط. اجعل الأنماط خلف النص خافتة: فالتباين المنخفض بين اللونين يحافظ على سهولة قراءة النص.

كيفية رسم نمط رقعة الشطرنج

يرسم repeating-conic-gradient(#000 0 25%, transparent 0 50%) الربعين الأول والثالث من دورة حول مركز كل بلاطة، ما ينتج مربعين قطريين في كل بلاطة؛ ويضبط background-size حجم البلاطة ليكون ضعف حجم المربع.

دمج الأنماط

تتراكم صور الخلفية: أدرج تدرجًا من مولّد تدرجات CSS بعد النمط، مع الفصل بينهما بفاصلة، وسيظهر النمط فوق التدرج.

طريقة الاستخدام

  1. اختر نمطًا.
  2. اختر اللونين، وحجم التكرار، وسُمك الخط أو حجم النقطة.
  3. انسخ CSS.

الخصوصية والقيود

يعمل كل شيء في المتصفح.

أدوات ذات صلة

تدرج CSSموجة SVGGlassmorphism

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

هل تعمل الأنماط في جميع المتصفحات؟

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

كيف أضع نمطًا خلف النص؟

اختر لونين متقاربين، ليظل النمط خافتًا ويحافظ النص على تباين كافٍ.

هل يمكنني تغيير زاوية الخطوط؟

نعم، عدّل الزاوية في repeating-linear-gradient ضمن CSS المنسوخ، مثل استخدام 60deg بدلًا من 45deg.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا