مولد نص مائل بالكود

لونمطور
إعلان · حذف؟

نص عيني


نوع التدرج


اتجاه


إعدادات شعاعية


توقفات الألوان

معاينة مباشرة
نص مُائل
قم بتطبيق هذه فئة CSS على العنصر الذي يحتوي على نصك. تضمن التسميات المُعتمدة لـ Webkit دعمًا متعدد المتصفحات.
إعلان · حذف؟

مرشد

مُولد تدرج النص CSS

مولد نص مائل بالكود

صمم تأثيرات نص مُلهمة باستخدام تدرجات متعددة الألوان ونسخة جاهزة للإنتاج من CSS بضغطة واحدة. اختر ألوانك، اختر تدرجًا خطيًا أو دائريًا، وشاهد التحديث الفوري للعرض، ثم انسخ الكود إلى ملفك الخاص.

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

  1. أدخل النص المطلوب لعرضه.
  2. اختر حجم الخط ونوعه لتناسب تصميمك.
  3. اختر نوع التدرج — خطي (بزاوية أو اتجاه محدد) أو دائري (بشكل ومكان).
  4. اختر اثنين أو أكثر من نقاط اللون وقم بتعديل مواقعها.
  5. انسخ الكلاس والكود HTML المُنشأ.

خصائص

  • العرض المباشر – رؤية التأثير على النص الحقيقي أثناء تعديل الألوان، الزوايا، ونقطة التوقف.
  • التدرجات الخطية والشعاعية – اختر بزاوية، اتجاه محدد، أو شكل دائري ومكانه.
  • حتى أربع نقاط لون – أضف ألوانًا وسيطة باستخدام مساعٍ مخصصة.
  • متوافق مع متصفحات متعددة – يحتوي الناتج على كلا النوعين background-clip و -webkit-background-clip لتوافق واسع.
  • مُحَوِّل الخلفية – انتقل بين عرض الخلفية المربعية، الخفيفة، والداكنة لاختبار التباين.
  • النسخ أو التنزيل – احصل على الكود ونقطة HTML جاهزة للإسقاط.

متى تستخدم تدرج النص؟

يُستخدم تدرج النص بشكل ممتاز في عناوين البداية، صفحات التسويق، علامات العلامة التجارية، وملخصات الميزات حيث يشعر اللون الموحد بالجفاف. استخدمه بحذر — الأوزان الكبيرة والعناوين القصيرة تُظهر أفضل، بينما يجب أن يبقى النص الأساسي بسلاسة لسهولة القراءة.

إعلان · حذف؟

التعليمات

  1. كيف يعمل تدرج النص على الخلفية؟

    يقوم المتصفح برسم صورة الخلفية داخل شكل الحروف المُعرض بدلًا من مساحة العنصر الكامل. مع لون نص شفاف، يصبح التدرج أو الصورة مرئيًا فقط من خلال حدود النص، بينما تبقى باقي مساحة العنصر فارغة.

  2. لماذا لا يزال خاصية -webkit-text-fill-color مطلوبة؟

    أثناء استخدام محركات ويب القديمة والـSafari، كانت تطلب -webkit-text-fill-color: شفاف لجعل الحروف تظهر من خلالها، بحيث يظهر الخلفية المقطوعة. كما تقبل المتصفحات الحديثة لونًا شفافًا بحسب المعيار، لذا تضمين كلا الخيارين يضمن التوافق بين الأنواع والمنصات.

  3. ما الفرق بين التدرج الخطي والدائري؟

    يتحول التدرج الخطي بين الألوان على خط مستقيم معرف بزاوية أو اتجاه. أما التدرج الدائري فينتقل من نقطة واحدة بأشكال متماسكة أو مربعة، مما يُنتج تأثير ضوء مركزي أو كروي.

  4. هل تأثيرات التدرج متوافقة مع معايير التفاعل؟

    يمكن أن يقلل تأثير التدرج من التباين المُحسوس مع الخلفية. اختر نقاط اللون بدرجة تباين كافية مع السطح المحيط، تجنب استخدام تدرجات للنص الأساسي، ووفر لونًا بديلًا منطقيًا في حال عدم دعم خاصية background-clip.

هل تريد حذف الإعلانات؟ تخلص من الإعلانات اليوم

تثبيت ملحقاتنا

أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع

أضف لـ إضافة كروم أضف لـ امتداد الحافة أضف لـ إضافة فايرفوكس أضف لـ ملحق الأوبرا

وصلت لوحة النتائج!

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

إعلان · حذف؟
إعلان · حذف؟
إعلان · حذف؟

ركن الأخبار مع أبرز التقنيات

شارك

ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة

اشتري لي قهوة
إعلان · حذف؟