ما هو تدرج لوني إلى CSS؟

أداة بناء تدرجات بصرية تتيح لك تصميم تدرجات خطية وشعاعية ومخروطية بنقاط ألوان متعددة، ثم نسخ كود CSS. اضبط الزوايا والمواضع والألوان مع معاينة حية.

صمّم تدرجات خطية أو نصف قطرية أو مخروطية بسحب نقاط التوقف على شريط مباشر ومشاهدة المعاينة تتغير لحظة بلحظة. ألصق تدرّجاً موجوداً لتعديله مكانه، أو اختر من المكتبة (Sunset، Aurora، Rainbow)، اضبط الزاوية ثم انسخ الصيغة. الخرج CSS صافٍ، بلا بادئات متصفح ولا JavaScript.

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

1. اختر نوع التدرج (خطي أو شعاعي أو مخروطي) وحدد الاتجاه أو الزاوية.
2. أضف نقاط توقف الألوان أو احذفها أو عدّلها بالنقر على شريط التدرج أو باستخدام منتقيات الألوان.
3. انسخ كود CSS المُولَّد لاستخدامه مباشرةً في ورقة الأنماط الخاصة بك.

متى تستخدم

• تصميم خلفية قسم رئيسي تحتاج فيه تحكماً دقيقاً في موضع نقاط التوقف والزاوية.
• تحديث تدرّج موجود في ملف الأنماط: ألصق، عدّل بصرياً، انسخ.
• توليد تدرّج مخروطي لخلفية بأسلوب مخطط دائري أو لوحة تحميل بألوان قوس قزح.

النتيجة

جرّب تدرج غروب: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — مناسب لخلفية قسم الهيرو.

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

ما الفرق بين التدرّج الخطي ونصف القطري والمخروطي؟

الخطي يمرّ بالألوان على زاوية مستقيمة. نصف القطري ينتشر من نقطة مركزية في حلقات. المخروطي يدور حول نقطة مركزية كأنه مخطط دائري. الثلاثة تقبل نفس صيغة نقاط التوقف.

كيف أستورد تدرجاً موجوداً في CSS الخاص بي؟

الصق التصريح كاملاً في حقل Import، مثلاً background: linear-gradient(135deg, #ff6b35, #f72585);، ثم اضغط Import. سيُحلَّل الزاوية والنقاط والنوع ويظهر كل ذلك جاهزاً للتعديل.

لماذا تظهر أشرطة لونية على بعض الشاشات؟

تظهر الأشرطة حين تتباعد نقطتان كثيراً في درجة اللون والشاشة 8 بت. أضف نقطة وسطية أو قلّص نطاق الزاوية. المتصفحات التي تقدّم بـHDR تُظهر أشرطة أقل بكثير.

هل أستطيع استخدام الناتج بوصفه background-image؟

نعم. النص المنسوخ يصلح قيمةً لـbackground أو background-image أو أيّ خاصية CSS تقبل صورة، مثل border-image وmask، وحتى fill لـSVG في المتصفحات الحديثة.

هل تُضاف بادئات مثل -webkit- إلى الخرج؟

لا. التدرجات الخطية ونصف القطرية والمخروطية تعمل بلا بادئات في كل المتصفحات الحديثة منذ 2017. إضافة البادئات اليوم تزحم ملف الأنماط بلا فائدة.

أدوات ذات صلة