المجاني

الرئيسية

مولد التدرج اللوني (Gradient Generator)

أداة متخصصة لإنشاء تدرجات لونية خطية (Linear Gradient) وشعاعية (Radial Gradient) مع دعم عدة نقاط لونية. يمكنك تحديد الاتجاه، الشكل، وإضافة ألوان متعددة مع تحديد مواضعها بنسبة مئوية. شاهد المعاينة المباشرة وانسخ كود CSS الناتج لاستخدامه في مشاريعك.

معلومات إضافية عن الأداة

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

مثال: 45deg, to right, to bottom left

معاينة التدرج

/* سيظهر الكود هنا */
يتم إنشاء كود CSS مباشرة. يمكنك إضافة ما يصل إلى 10 نقاط لونية. يتم ترتيب النقاط حسب الموضع المئوي تلقائياً.

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

  • اختر نوع التدرج : خطي (Linear) أو شعاعي (Radial).
  • حدد الاتجاه أو الشكل : للتدرج الخطي، أدخل زاوية (مثل 45deg) أو اتجاه (to right, to bottom left). للتدرج الشعاعي، أدخل الشكل والموضع (مثل circle at center).
  • أضف ألواناً : استخدم منتقي الألوان لتحديد اللون، وحدد موضعه كنسبة مئوية (0% للبداية، 100% للنهاية). يمكنك إضافة ما يصل إلى 10 نقاط.
  • شاهد المعاينة : يتم تحديث المعاينة تلقائياً مع كل تغيير.
  • انسخ الكود : اضغط زر "نسخ كود CSS" لنسخ الكود إلى الحافظة واستخدامه في ملف CSS الخاص بك.
  • إزالة لون : يمكنك حذف أي نقطة لونية بشرط بقاء لونين على الأقل.

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