مصمم التدرجات اللونية - محرر تدرجات CSS مرئي
صمم تدرجات خطية وشعاعية بشكل مرئي. أضف نقاط توقف اللون، واضبط الزوايا، وعاين بشكل مباشر، وانسخ CSS. مجاني 100٪.
프리셋
ما هو مصمم التدرجات اللونية؟
مصمم التدرجات اللونية هو محرر مرئي لإنشاء تدرجات CSS. بدلاً من كتابة كود التدرج يدويًا، يمكنك اختيار الألوان وتحديد المواضع وضبط الزوايا - تقوم الأداة بإنشاء CSS في الوقت الفعلي. يدعم كلاً من التدرجات الخطية (مع التحكم في الزاوية) والتدرجات الشعاعية (مع التحكم في نقطة المركز)، مما يجعل من السهل إنشاء انتقالات لونية سلسة للخلفيات والأزرار وعناصر واجهة المستخدم.
كيفية إنشاء تدرج CSS
- اختر النوع — حدد تدرجًا خطيًا أو شعاعيًا
- حدد الاتجاه — اضبط الزاوية (خطي) أو نقطة المركز (شعاعي)
- حرر نقاط توقف اللون — غيّر الألوان واسحب أشرطة تمرير الموضع
- أضف المزيد من النقاط — انقر فوق "+ إضافة نقطة" للتدرجات المعقدة (حتى 8)
- انسخ CSS — انقر فوق الزر "نسخ" للحصول على كود CSS
لماذا تستخدم مصمم التدرجات اللونية هذا؟
- محرر مرئي — شاهد تحديث التدرج الخاص بك في الوقت الفعلي أثناء الضبط
- خطي وشعاعي — كلا نوعي التدرج مع تحكم كامل
- نقاط متعددة — أضف ما يصل إلى 8 نقاط توقف لونية للتدرجات المعقدة
- إعدادات مسبقة — 8 تدرجات لونية مُعدة مسبقًا جميلة للبدء بها
- CSS بنقرة واحدة — انسخ كود CSS جاهزًا للإنتاج على الفور
FreeToolbox مقابل أدوات التدرج الأخرى
| الميزة | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| معاينة مباشرة | نعم | نعم | ثابت فقط |
| نقاط توقف اللون | حتى 8 | غير محدود | 2 (ثابت) |
| دعم شعاعي | نعم | نعم | لا |
| إعدادات مسبقة | 8 | لا يوجد | 180 |
| إعلانات | أقل حد | متوسط | أقل حد |
الأسئلة الشائعة
ما هو الفرق بين التدرجات الخطية والشعاعية؟
تنتقل التدرجات الخطية على طول خط مستقيم بزاوية محددة. تنتقل التدرجات الشعاعية للخارج من نقطة مركزية في شكل دائري أو بيضاوي.
كم عدد نقاط توقف اللون التي يمكنني إضافتها؟
حتى 8 نقاط توقف لونية. أنت بحاجة إلى نقطتي توقف على الأقل لتكوين تدرج. انقر فوق '+ إضافة نقطة' لإضافة المزيد.
هل يمكنني إزالة نقطة توقف لونية؟
نعم. انقر فوق الزر × بجوار أي نقطة لإزالتها، طالما بقيت نقطتا توقف على الأقل.
كيف أستخدم الإعدادات المسبقة؟
انقر فوق أي صورة مصغرة مُعدة مسبقًا في الأسفل. يقوم بتحميل الألوان المسبقة ويضبط نوع التدرج على خطي بزاوية 135 درجة. يمكنك بعد ذلك تخصيصه بشكل أكبر.
هل يقوم هذا بإنشاء CSS متوافق مع جميع المتصفحات؟
يستخدم CSS الذي تم إنشاؤه بناء الجملة القياسي للتدرج الذي تدعمه جميع المتصفحات الحديثة (Chrome و Firefox و Safari و Edge). لا حاجة إلى بادئات خاصة بالمورد.