مولّد التدرّج اللوني
أنشئ تدرّجات CSS مع معاينة مباشرة.
حول مولّد التدرّج اللوني
يُنشئ مُولّد التدرجات من GuruAlpha تدرجات CSS خطية وشعاعية ومخروطية مع معاينة مباشرة. اختر الألوان، واضبط الزوايا والاتجاهات، وأضِف طبقات من نقاط توقف الألوان المتعددة، وانسخ كود CSS الجاهز للاستخدام. مثالي للخلفيات والأزرار وأقسام الأبطال (hero) وأي عنصر تصميم يستفيد من انتقالات الألوان السلسة.
تُعد التدرجات من أكثر اتجاهات التصميم شيوعًا في تصميم الويب الحديث. فهي تضيف عمقًا واهتمامًا بصريًا ورقيًا إلى التصاميم المسطحة دون الحاجة إلى صور. يجعل مُولّد التدرجات إنشاء تدرجات مخصصة أمرًا سهلاً — اختر ألوانك، واضبط الزاوية، وشاهد النتيجة في الوقت الفعلي. يمكن نسخ كود CSS المُنشأ مباشرة إلى ورقة الأنماط الخاصة بك.
يدعم الأداة ثلاثة أنواع من التدرجات. تنتقل التدرجات الخطية بين الألوان على طول خط مستقيم — النوع الأكثر شيوعًا، ويُستخدم للخلفيات والأزرار والتراكبات. تنبعث التدرجات الشعاعية من نقطة مركزية — رائعة لتأثيرات الإضاءة الموجهة والتصاميم الدائرية. تدور التدرجات المخروطية حول نقطة مركزية — مفيدة لعجلات الألوان وتأثيرات المخططات الدائرية.
يتيح لك مُحرِّر نقاط التوقف المتعددة إضافة نقاط توقف الألوان وإزالتها وإعادة تحديد موضعها على طول خط التدرج. يمكن تعيين لون محدد وموضع (0-100%) لكل نقطة توقف، مما يمنحك تحكمًا دقيقًا في الانتقال. تتحدث المعاينة في الوقت الفعلي أثناء ضبط نقاط التوقف، مما يوفر ملاحظات بصرية فورية.
تتضمن صيغ التصدير CSS العادي (linear-gradient)، وCSS مع بادئات الموردين لتوافق المتصفح، ومتغيرات Sass/SCSS، وخصائص CSS المخصصة، وقيم Tailwind الاعتباطية. يغطي هذا جميع سير عمل تطوير الويب الحديثة.
أبرز ميزات مولّد التدرّج اللوني
- أنواع التدرجات: خطية وشعاعية ومخروطية
- مُحرِّر نقاط توقف الألوان المتعددة مع تحديد المواضع
- معاينة مباشرة في الوقت الفعلي
- عناصر التحكم في الزاوية والاتجاه
- تصدير كـ CSS وSCSS ومتغيرات CSS وTailwind
- مُولّد تدرجات عشوائي للإلهام
- كود CSS جاهز للنسخ
- يعمل على جميع الأجهزة
كيفية استخدام مولّد التدرّج اللوني
- افتح مُولّد التدرجات على GuruAlpha.
- اختر نوع التدرج: خطي أو شعاعي أو مخروطي.
- انقر على شريط التدرج لإضافة نقاط توقف الألوان.
- اختر الألوان لكل نقطة توقف باستخدام منتقي الألوان.
- اضبط الزاوية (الخطي) أو الشكل (الشعاعي/المخروطي).
- عايِن التدرج في الوقت الفعلي على العنصر التجريبي.
- انسخ كود CSS المُنشأ.
نصائح لاستخدام مولّد التدرّج اللوني
- ابدأ بـ 2-3 نقاط توقف للألوان للحصول على تدرجات بسيطة وأنيقة.
- استخدم مُولّد التدرجات العشوائي للإلهام.
- تُنشئ التدرجات الخطية بزاوية 135 درجة تأثيرًا قطريًا شائعًا.
- تُنشئ التدرجات الشعاعية ذات المركز الساطع تأثيرات الإضاءة الموجهة.
- اختبر التدرجات دائمًا عبر المتصفحات — تضمن بادئات الموردين التوافق.
الأسئلة الشائعة حول مولّد التدرّج اللوني
ما الفرق بين الخطي والشعاعي والمخروطي؟
ينتقل الخطي على طول خط (اتجاه). ينبعث الشعاعي من نقطة مركزية (دائرة/بيضاوي). يدور المخروطي حول مركز (مثل عجلة الألوان).
كيف أضيف المزيد من نقاط توقف الألوان؟
انقر في أي مكان على شريط التدرج لإضافة نقطة توقف جديدة. اسحب نقاط التوقف لإعادة تحديد موضعها. انقر على نقطة توقف لتغيير لونها.
هل كود CSS متوافق مع المتصفحات؟
يتضمن التصدير بادئات الموردين (-webkit-، -moz-) لأقصى قدر من التوافق مع المتصفحات القديمة.
هل يمكنني استخدام التدرجات كلون للنص؟
نعم. استخدم background-clip: text و-webkit-text-fill-color: transparent لتطبيق خلفيات التدرج على النص.