صمم تدرجات CSS خطية ودائرية جميلة بصرياً. أنشئ انتقالات لونية سلسة للخلفيات، الأزرار، وعناصر واجهة المستخدم باستخدام مولد التدرجات المجاني لدينا.
أتقن فن التدرجات اللونية
التدرجات هي عنصر أساسي في تصميم الويب الحديث، حيث تضيف العمق، الحيوية، والاهتمام البصري للواجهات المسطحة. ومع ذلك، فإن كتابة صيغة `background-image: linear-gradient(...)` يدوياً أمر ممل وغير بديهي. عليك حساب الزوايا، إدارة نقاط توقف الألوان، والتعامل مع بادئات توافق المتصفح.
يقوم مولد تدرجات CSS الخاص بنا بتبسيط هذه العملية. إنه يوفر واجهة شبيهة بـ Photoshop حيث يمكنك إضافة الألوان، سحب نقاط التوقف لضبط التدفق، وتدوير الزاوية—كل ذلك مع رؤية النتيجة في الوقت الفعلي.
الميزات الرئيسية
🎨 محرر مرئي
انقر لإضافة نقاط توقف لونية جديدة، اسحب لوضعها، واحذف ما لا تحتاجه. إنه تفاعلي بالكامل.
🔄 خطي ودائري
بدّل بين التدرجات الخطية (خطوط مستقيمة) والدائرية لتعزيز احتياجات التصميم الخاصة بك.
📐 التحكم بالزاوية
حدّد الاتجاه الدقيق لتدرجك باستخدام قرص الزاوية (مثلاً، 45deg، 90deg، إلى الأسفل اليمين).
🧙♀️ قوالب جاهزة
هل تبحث عن إلهام؟ اختر من مكتبة التدرجات المختارة بعناية للبدء بسرعة.
كيفية الاستخدام
- إضافة/تحديد نقاط التوقف: انقر على شريط التدرج لإضافة نقطة توقف لونية. انقر على نقطة موجودة لتحديدها.
- اختيار اللون: استخدم منتقي الألوان لتعيين اللون لنقطة التوقف المحددة.
- ضبط الموقع: اسحب النقاط لليسار أو اليمين للتحكم في مكان حدوث الانتقال اللوني.
- تعيين الزاوية: أدر القرص لتغيير الاتجاه (خطي فقط).
- نسخ CSS: احصل على كود CSS المتوافق مع المتصفحات فوراً.
شرح صيغة تدرج CSS
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
هذا ينشئ تدرجاً أفقياً (90 درجة) يبدأ بأزرق غامق، ينتقل إلى أزرق عميق عند 35%، وينتهي باللون السماوي عند 100%.
أسئلة شائعة
ما هي المتصفحات المدعومة؟
تولد أداتنا كود CSS3 قياسياً مدعوماً من قبل جميع المتصفحات الحديثة. يمكنها أيضاً تضمين بادئات البائع القديمة (-webkit-, -moz-) إذا طُلب ذلك.
هل يمكنني استخدام ألوان شفافة؟
نعم! يمكنك استخدام ألوان RGBA مع شفافية ألفا لإنشاء تأثيرات التلاشي أو التراكبات.