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

ما هي هذه الأداة؟

يمكن لـ CSS رسم أنماط متكررة دون أي ملفات صور باستخدام التدرجات — radial-gradient() و linear-gradient() — كخلفية background-image، مع background-size أصغر من العنصر بحيث يتكرر التدرج ويتبلط. نقاط البولكا تستخدم repeating radial-gradient، بينما الخطوط ورقعة الشطرنج تستخدم طبقات من linear-gradient()، وخطوط الشبكة تستخدم خطين متداخلين من linear-gradient().

تقوم هذه الأداة ببناء تعريفات التدرج هذه نيابة عنك. اختر نوع النمط، واضبط لون النمط ولون الخلفية والتباعد، وشاهد المعاينة الحية تتحدث فورًا — ثم انسخ كود background-image و background-size الدقيق.

المصدر: CSS Images Module Level 3, W3C — يعرّف repeating-linear-gradient() و repeating-radial-gradient()، وهما الدالتان اللتان تُبنى منهما هذه الأنماط.

لماذا تستخدمها؟

• لا ملفات صور، ولا طلبات HTTP — النمط CSS خالص ويُعرض فوريًا بأي دقة، بما في ذلك شاشات retina عالية الدقة.
• قابلية تعديل كاملة للون والتباعد دون كتابة صياغة التدرج يدويًا أو حساب رياضيات التبليط.
• المعاينة الحية تعرض النمط المتكرر الدقيق قبل نسخ أي شيء.
• يتوسع بسلاسة لأنه رياضيات متجهية وليس صورة نقطية — دون تشوش عند تغيير حجم العنصر.
• يعمل بالكامل في متصفحك — لا شيء تقوم بضبطه يُرفع إلى أي مكان.
• مجاني، دون تسجيل، يعمل على الجوال.

كيفية الاستخدام

1. اختر نوع النمط: نقاط بولكا، خطوط قطرية، رقعة شطرنج، أو خطوط شبكية.
2. اختر لون النمط ولون الخلفية الذي يظهر بين/خلف أشكال النمط.
3. اضبط شريط تمرير الحجم لجعل النقاط أو الخطوط أو خلايا الشبكة أكبر أو أصغر — هذا يتحكم أيضًا في مدى كثافة تكرار النمط.
4. انسخ كود CSS المولّد والصقه كـ background-image (و background-size/background-position حيثما ظهرا) لأي عنصر.

مثال

الإدخال

النمط: نقاط بولكا · اللون: أزرق · الخلفية: أبيض · الحجم: 24px

الناتج

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

نمط نقاط بولكا فاتح كلاسيكي يُستخدم غالبًا كخلفية قسم خفيفة أو نسيج بطاقة.

كيف يُبنى كل نمط

• نقاط بولكا: يرسم radial-gradient() دائرة صغيرة مملوءة واحدة، ثم يجعل background-size تتكرر كشبكة نقاط مبلطة.
• الخطوط القطرية: repeating-linear-gradient() بزاوية 45 درجة يتناوب بين لون النمط ولون الخلفية بفاصل ثابت.
• رقعة الشطرنج: طبقتان متداخلتان من linear-gradient() بزاوية 45 درجة، مُزاحتان عن بعضهما بنصف بلاطة، تنتجان مربعات فاتحة/داكنة متناوبة.
• خطوط الشبكة: خطان رفيعان من linear-gradient() — واحد أفقي وآخر عمودي — مبلطان بالتباعد المختار لتشكيل شبكة، تشبه الورق المربّع.

متى تستخدم أنماط CSS بدلاً من ملفات الصور

نمط تدرج CSS لا يملك حجم ملف ولا طلب HTTP، لذا يُحمّل فورًا ولا يبدو ضبابيًا أبدًا على شاشات عالية الدقة، على عكس بلاطة خلفية PNG نقطية. إنه مثالي للنسيج الخفيف خلف النص، فواصل الأقسام، رسوم الحالات الفارغة، أو البطاقات النائبة. أما بالنسبة للأنماط التوضيحية أو الفوتوغرافية المعقدة، تبقى الصورة الفعلية الأداة الأنسب — تدرجات CSS مناسبة للأشكال الهندسية البسيطة المتكررة كتلك الموجودة هنا.

الدمج مع تأثيرات CSS الأخرى

تعمل الأنماط جيدًا كخلفية وراء بطاقات الزجاجية (glassmorphism)، لأن الضبابية تحتاج إلى شيء ذي نسيج بصري خلفها لتكون مرئية. كما تتناسق بشكل طبيعي مع الزوايا المستديرة على عنصر الحاوية.

→ CSS Glassmorphism Generator · Border Radius Generator

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