مولّد أنماط CSS
أنشئ أنماط خلفية بـ CSS خالصة – نقاط وبولكا وخطوط ولوح شطرنج وشبكة وزجزاج وتهشير متقاطع – بألوان وحجم بلاطة وسماكة. بلا صور.
إعدادات النمط
معاينة
background-color: #ffffff; background-image: radial-gradient(#6366f1 2px, transparent 2px); background-size: 20px 20px;
أدوات ذات صلة
عرض الكلما هو مولّد أنماط CSS؟
يولّد أنماط خلفية متكررة باستخدام تدرجات CSS فقط، فلا حاجة إلى ملفات صور. اختر نمطاً ولونين وحجم البلاطة وسماكة الخط أو النقطة وانسخ تصريحات الخلفية الناتجة.
كيفية استخدام مولّد أنماط CSS
- اختر نمطاً: نقاط أو بولكا أو خطوط أو لوح شطرنج أو شبكة أو زجزاج أو شبكة تهشير متقاطع.
- اضبط لون النمط ولون الخلفية.
- اضبط حجم البلاطة والسماكة (نصف قطر النقطة أو عرض الخط) والزاوية للخطوط.
- راجع المعاينة.
- انسخ كود CSS.
مثال
Checkerboard, tile 40px, pattern #000000 on #ffffff
background-color: #ffffff; background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%); background-size: 40px 40px;
متى تستخدم مولّد أنماط CSS
استخدم أنماط CSS لخلفيات الصفحات الخفيفة والعناصر النائبة وتأثيرات الورق البياني والأقسام الزخرفية؛ فهي تتدرج بدقة تامة ولا تكلف طلب HTTP. أما الرسوم المتكررة المعقدة أو التوضيحية فبلاطة SVG أكثر مرونة.
كيف يعمل مولّد أنماط CSS
كل نمط هو background-color مع تدرج أو أكثر يتكرر بواسطة background-size. تستخدم النقاط radial-gradient(color r, transparent r)؛ وتضيف البولكا طبقة ثانية مزاحة عبر background-position. تستخدم الخطوط repeating-linear-gradient بنقاط ألوان حادة؛ ويستخدم لوح الشطرنج repeating-conic-gradient(color 0% 25%, transparent 0% 50%)؛ وتجمع الشبكات تدرجاً خطياً أفقياً وآخر رأسياً؛ ويُبنى الزجزاج من أربعة مثلثات بزاوية 45°. تُقيَّد السماكة بحجم البلاطة.
حالات الاستخدام الشائعة
- خلفيات ورق بياني للمحررات والمخططات
- خلفيات رئيسية منقطة خفيفة
- أشرطة تحذير أو تقدم مخططة
- لوح شطرنج الشفافية خلف الصور
- خلفيات أقسام زجزاج بنمط ريترو
الأسئلة الشائعة
هل تعمل هذه الأنماط في كل المتصفحات؟
نعم في المتصفحات الحالية. يعتمد لوح الشطرنج على التدرجات المخروطية التي تدعمها كل المتصفحات الرئيسية منذ 2020.
هل يمكنني استخدام خلفية شفافة؟
نعم، أدخل transparent أو لون rgba()/oklch() بقيمة ألفا كلون للخلفية.
لماذا CSS بدل صورة؟
أنماط CSS مستقلة عن الدقة وصغيرة جداً وسهلة إعادة التلوين بالمتغيرات دون ملف إضافي للتنزيل.