---

ما هو تدرج CSS؟

تتيح لك تدرجات CSS عرض انتقالات سلسة بين لونين أو أكثر دون استخدام ملفات صور. تأتي في ثلاثة أنواع: linear-gradient (على طول خط مستقيم)، وradial-gradient (ينبثق من نقطة مركزية)، وconic-gradient (يدور حول نقطة مركزية). تُستخدم التدرجات للخلفيات والأزرار والطبقات العلوية والعناصر الزخرفية.

كيفية استخدام مولّد التدرجات CSS

1. اختر إعدادًا مسبقًا من العينات أو قم بتكوين التدرج الخاص بك.

2. اختر نوع التدرج: linear أو radial أو conic.

3. اضبط الزاوية (لـ linear/conic) أو الشكل (لـ radial).

4. عدّل نقاط توقف الألوان — غيّر الألوان والمواضع (0–100%).

5. أضف أو احذف نقاط توقف الألوان حسب الحاجة.

6. انسخ CSS والصقه في ورقة الأنماط الخاصة بك.

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

كيف أعمل تدرج شفاف؟ استخدم قيم اللون rgba() أو hsla() مع قناة ألفا 0 للشفافية الكاملة. على سبيل المثال، نقطة لون rgba(0,0,0,0) هي سواد شفاف تماماً، مفيدة لتأثيرات التلاشي على الصور.

كيف أنشئ توقف لون صعب (بدون انتقال)؟ ضع نقطتي لون في نفس الموضع — واحدة تنتهي وواحدة تبدأ في تلك النقطة. على سبيل المثال، أحمر 50%، أزرق 50% ينشئ تبديلاً فورياً من الأحمر إلى الأزرق عند نقطة المنتصف بدون انتقال تدرج.

ما المتصفحات التي تدعم التدرجات المخروطية؟ يتم دعم التدرجات المخروطية في جميع المتصفحات الحديثة (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). لا يتم دعمها في Internet Explorer.

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

Keywords: مولد تدرج CSS، تدرج خطي، تدرج شعاعي، تدرج مخروطي، مولد خلفية CSS، منتقي ألوان التدرج، أداة تدرج CSS