مولد تدرجات CSS مجاني عبر الإنترنت
أنشئ تدرجات CSS خطية وشعاعية مذهلة باستخدام أداة إنشاء التدرجات سهلة الاستخدام الخاصة بنا. اختر الألوان، حدد الاتجاهات، وانسخ كود CSS على الفور لمشاريع الويب الخاصة بك.
كيفية إنشاء تدرجات CSS
- 1
اختر الألوان
حدد اللون الأول والثاني باستخدام منتقي الألوان أو أدخل رموز الألوان السداسية (hex) مباشرة في حقول الإدخال النصية.
- 2
حدد نوع التدرج
اختر بين التدرج الخطي لانتقالات الألوان الاتجاهية أو التدرج الشعاعي (الدائري) لانتقالات الألوان الدائرية من المركز إلى الخارج.
- 3
حدد الاتجاه
بالنسبة للتدرجات الخطية، اختر من 8 خيارات اتجاهات بما في ذلك الاتجاهات اليمين، اليسار، الأعلى، الأسفل، والقطرية باستخدام أزرار الأسهم.
- 4
انسخ كود CSS
انقر على زر 'نسخ CSS' لنسخ خاصية خلفية CSS الكاملة إلى حافظتك، جاهزة للصق في ملفات الأنماط (stylesheets) الخاصة بك.
الميزات الرئيسية
تدرجات خطية وشعاعية
أنشئ تدرجات خطية وشعاعية مع تحكم كامل في اختيار الألوان واتجاه التدرج. بدّل بين أنواع التدرجات على الفور.
8 اتجاهات تحكم
اختر من 8 اتجاهات مختلفة للتدرجات الخطية بما في ذلك الاتجاهات الأفقية والعمودية والقطرية باستخدام عناصر تحكم الأسهم البديهية.
توليد ألوان عشوائية
ولّد مجموعات ألوان عشوائية على الفور لاكتشاف أفكار تدرجات جديدة ومخططات ألوان إبداعية لمشاريعك.
نسخ CSS فوري
انسخ كود تدرج CSS الذي تم إنشاؤه إلى حافظتك بنقرة واحدة. خاصية خلفية CSS جاهزة للاستخدام للتطبيق الفوري.
ما هو مولد تدرجات CSS؟
مولد تدرجات CSS هو أداة تنشئ تدرجات خلفية CSS عن طريق دمج لونين أو أكثر في انتقالات سلسة. يقوم صانع التدرجات الخاص بنا بتوليد خصائص CSS `linear-gradient` و `radial-gradient` التي يمكن استخدامها مباشرة في تطوير الويب. تنشئ التدرجات الخطية انتقالات لونية اتجاهية، بينما تنشئ التدرجات الشعاعية (الدائرية) انتقالات دائرية من نقطة مركزية. توفر الأداة معاينة في الوقت الفعلي وتولد كود CSS متوافقًا مع المتصفحات لمعايير الويب الحديثة.
لماذا تستخدم مولد التدرجات الخاص بنا؟
- 1
معاينة مرئية في الوقت الفعلي
شاهد تغييرات التدرج الخاصة بك على الفور مع منطقة معاينة كبيرة توضح بالضبط كيف سيبدو التدرج الخاص بك في مشاريع الويب الخاصة بك.
- 2
إخراج CSS مثالي
كود CSS الذي تم إنشاؤه محسن وجاهز للاستخدام مع صيغة صحيحة لخاصية الخلفية، ومتوافق مع جميع المتصفحات الحديثة.
- 3
عناصر تحكم اتجاهات بديهية
أزرار أسهم سهلة الاستخدام لتحديد اتجاهات التدرج، مما يجعل من السهل إنشاء الاتجاه الذي تحتاجه لتصميمك بدقة.
- 4
إلهام إبداعي
يساعد مولد الألوان العشوائية على اكتشاف مجموعات ألوان جديدة ويوفر إلهامًا إبداعيًا لتصاميم التدرجات ومخططات الألوان الخاصة بك.
الأسئلة المتكررة
ما الفرق بين التدرجات الخطية والشعاعية؟
تنشئ التدرجات الخطية انتقالات لونية في اتجاه خط مستقيم (أفقي، عمودي، أو قطري)، بينما تنشئ التدرجات الشعاعية انتقالات لونية دائرية تتشعع من نقطة مركزية.
هل يمكنني استخدام رموز ألوان سداسية (hex) مخصصة؟
نعم، يمكنك إدخال أي رمز لون سداسي (hex) صالح مباشرة في حقول الإدخال النصية بجانب منتقي الألوان. تقبل الأداة رموز الألوان السداسية المكونة من 6 أرقام مثل #ff6b6b أو #6bc1ff.
كيف أستخدم كود CSS الذي تم إنشاؤه؟
انسخ كود CSS والصقه في ملف الأنماط (stylesheet) الخاص بك. الكود الذي تم إنشاؤه هو خاصية خلفية كاملة يمكنك تطبيقها على أي عنصر HTML لعرض التدرج.
هل التدرجات متوافقة مع جميع المتصفحات؟
نعم، يستخدم CSS الذي تم إنشاؤه صيغة `linear-gradient` و `radial-gradient` القياسية التي تدعمها جميع المتصفحات الحديثة بما في ذلك كروم، فايرفوكس، سفاري، وإيدج.
هل يمكنني إنشاء تدرجات بأكثر من لونين؟
حاليًا، تركز أداتنا على تدرجات اللونين لتبسيط التصميم ونظافته. يمكنك تعديل كود CSS الذي تم إنشاؤه لإضافة نقاط توقف لونية إضافية إذا لزم الأمر.