مولد التدرجات اللونية CSS أونلاين

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

الإعدادات

90°

المعاينة والكود

الميزات الرئيسية

3 أنواع من التدرجات

يدعم الأداة التدرجات الخطية والدائرية والمخروطية لتلبية كافة احتياجات التصميم الحديث، مع إمكانية التبديل بينها بنقرة واحدة

تحكم كامل بالألوان

أضف عدداً غير محدود من نقاط الألوان واسحبها لإعادة ترتيبها، مع دقة تامة في تحديد المواضع النسبية لكل لون

كود CSS فوري

يتم إنشاء كود CSS متوافق مع معايير W3C تلقائياً وجاهز للنسخ واللصق مباشرة في مشروعك دون أي تعديل

معرض تدرجات جاهزة

تصفح مجموعة متميزة تضم 28 تدرجاً احترافياً مصمماً مسبقاً، وطبّقها بنقرة واحدة مع إمكانية التعديل

لماذا تختار أداتنا؟

  • مجاني بالكامل بدون تسجيل أو اشتراكات أو حدود استخدام
  • واجهة مستخدم عربية بسيطة ومناسبة لجميع المستويات
  • متوافق مع كافة المتصفحات الحديثة (Chrome, Firefox, Safari, Edge)
  • تجربة سلسة على الجوال والكمبيوتر اللوحي والحاسوب
  • كود CSS مضغوط ونظيف وجاهز للاستخدام في الإنتاج
  • 28 تدرجاً جاهزاً مع إمكانية التعديل والتخصيص الكامل

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

1

اختر نوع التدرج

حدد التدرج الخطي أو الدائري أو المخروطي من الأزرار العلوية، واضبط الزاوية عند اختيار التدرج الخطي

2

أضف نقاط اللون وعدّلها

انقر على شريط التدرج لإضافة نقاط لون جديدة، واسحبها لتعديل مواضعها، أو استخدم حقل الألوان لتغيير أي لون

3

انسخ كود CSS واستخدمه

بعد الانتهاء من التصميم، انقر زر "نسخ الكود" لاستلام كود CSS جاهز للصق مباشرة في ملفات مشروعك

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

هل الأداة مجانية؟
نعم، الأداة مجانية بالكامل ولا تتطلب أي تسجيل أو دفع أو اشتراك. يمكنك استخدامها دون حدود من أي جهاز ومتصفح.
ما أنواع التدرجات المدعومة؟
تدعم الأداة ثلاثة أنواع رئيسية من تدرجات CSS: التدرج الخطي (linear) المناسب للخلفيات، والتدرج الدائري (radial) للعناصر الدائرية، والتدرج المخروطي (conic) للتأثيرات الإبداعية المتقدمة.
هل يمكنني استخدام أي ألوان؟
نعم، يمكنك إدخال أي لون بصيغة HEX مباشرة في حقل الألوان، أو استخدام منتقي الألوان المدمج، أو أداة انتقاء الألوان من الشاشة إن كان متصفحك يدعمها.
هل الكود متوافق مع جميع المتصفحات؟
الكود الناتج يستخدم بناء جملة CSS القياسي المعتمد من W3C ويعمل على جميع المتصفحات الحديثة بما فيها Chrome وFirefox وSafari وEdge.
هل يمكنني تعديل الزاوية؟
بالتأكيد، يمكنك ضبط زاوية التدرج الخطي من 0 إلى 360 درجة باستخدام منزلق الزاوية، مع معاينة فورية للتغيير قبل نسخ الكود.
كم عدد نقاط اللون التي يمكن إضافتها؟
يمكنك إضافة عدد غير محدود من نقاط اللون على شريط التدرج، مع إمكانية سحب كل نقطة لتعديل موضعها أو حذفها عند الحاجة.