منشئ ظلال النص CSS
جديداضبط ظل نص CSS مع معاينة مباشرة وانسخ الشيفرة.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
صمّم ظلال نص CSS مع معاينة فورية
يتيح لك هذا مولّد ظل النص CSS تصميم تأثيرات العمق والتوهج والمحيط بشكل مرئي ونسخ CSS نظيفاً جاهزاً للإنتاج. انقر مباشرةً في منطقة المعاينة الكبيرة لكتابة نصك الخاص، واسحب أشرطة الإزاحة والتمويه والشفافية، واختر لوناً، وشاهد تحديث text-shadow فورياً على النص الذي يهمك.
غيّر عائلة الخط والحجم والوزن، وحدد لون النص، وبدّل الخلفية بين الفاتحة والرمادية والداكنة ونمط رقعة الشطرنج — لترى كيف يبدو الظل على أسطح مختلفة. هذا ضروري لتأثيرات النيون والنص المتوهج، إذ لا تبدو صحيحة إلا على خلفية داكنة.
صياغة text-shadow موضّحة
يُكتب الظل الواحد بالصيغة text-shadow: offset-x offset-y blur-radius color. تحرّك قيم offset-x وoffset-y الظلَّ أفقياً وعمودياً (القيم السالبة ترميه للأعلى أو لليسار)، ويُلطّف blur-radius الحافةَ (0 يجعلها حادة)، بينما تحدد اللون الدرجة اللونية — غالباً أسود شبه شفاف للعمق اللطيف أو لون ساطع للتوهج.
الظل الكلاسيكي المقروء هو text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). اضبط كلتا الإزاحتين على 0 وزِد التمويه للحصول على هالة ناعمة حول النص. مع لون ساطع مثل #00eaff وقيم تمويه متصاعدة، تحصل على توهج نيوني.
ركّم ظلالاً متعددة: نيون وثلاثي الأبعاد ومحيط وظل طويل
القوة الحقيقية لـtext-shadow هي التراكم. يمكنك سرد ظلال نص متعددة في تصريح واحد مفصولة بفواصل، ويرسمها المتصفح تباعاً. تراكم عدة ظلال بنفس اللون الساطع مع تمويه متزايد يُنشئ تأثير نص نيوني / متوهج؛ تدرّج الإزاحات نحو الأسفل واليمين بدرجات داكنة يبني نصاً ثلاثي الأبعاد بارزاً؛ تكرار إزاحة مسطّحة على عشر طبقات أو أكثر يصنع ظلاً طويلاً؛ وأربع إلى ثماني إزاحات صلبة حول الحروف تُنتج نصاً بمحيط.
استخدم معرض الإعدادات المسبقة — Soft وNeon وGlow و3D وLong shadow وOutline وRetro وFire وLetterpress — كنقطة انطلاق.
انسخ CSS أو Tailwind أو React Native
صدّر النتيجة بالصيغة التي يحتاجها مشروعك. نسخ CSS يُعطيك تصريح text-shadow المعياري؛ نسخ Tailwind يولّد فئة خاصية اعتباطية مثل [text-shadow:2px_2px_4px_#00000066] تعمل مع مرافق text-shadow-* الأصلية في Tailwind v4؛ ونسخ React Native يحوّل الطبقة الأولى إلى textShadowColor وtextShadowOffset وtextShadowRadius.
خبر سار عن توافق المتصفحات: text-shadow موحّد تماماً ولا يحتاج بادئات -webkit- أو -moz- في أي متصفح حديث.
المقارنة مع CSSmatic وcss.generator.cool وأدوات أخرى
تتعامل معظم أدوات ظل النص CSS عبر الإنترنت مع طبقة ظل واحدة فقط. يمنحك قسم ظل النص في CSSmatic مجموعة من أشرطة التمرير — مفيد لظل بسيط، لكن لا يمكنك تراكم طبقات لتأثيرات نيون أو ثلاثية الأبعاد دون كتابة التصريحات الإضافية يدوياً.
يجمع UtiloKit التراكم متعدد الطبقات، وتسعة إعدادات مسبقة تُحمّل مجموعة ظلال كاملة بنقرة واحدة، ومعاينة حية قابلة للتحرير، ونسخاً بنقرة واحدة بثلاثة صيغ (CSS وTailwind وReact Native) ورابطاً قابلاً للمشاركة — بدون تسجيل وبدون رفع ملفات.
text-shadow مقابل box-shadow
نقطة خلط شائعة: text-shadow يتبع محيط الأحرف، بينما box-shadow يتبع الصندوق المستطيل للعنصر. text-shadow لا يملك نصف قطر انتشار ولا كلمة مفتاحية inset — لذا، على عكس box-shadow، لا يمكن أن يكون ظل النص متضمَّناً. استخدم text-shadow في العناوين والشعارات والتسميات، وbox-shadow في البطاقات والأزرار.
إذا أردت مظهراً محفوراً على النص، الحيلة هي ظل فاتح موضوع أسفل نص داكن مباشرةً (انظر إعداد Letterpress) — لا inset حقيقي. ولمحيطات نص سميكة، خاصية -webkit-text-stroke أنظف من تراكم ثماني ظلال اتجاهية.
نصائح لظلال مقروءة — والخصوصية
الظلال لمسة جمالية، وليست بديلاً عن التباين. للنص فوق الصور، ظل واحد منخفض الشفافية مثل 0 1px 3px rgba(0, 0, 0, 0.5) يحسّن المقروئية دون إلهاء. احتفظ بتأثيرات النيون والثلاثي الأبعاد الثقيلة للعناوين الكبيرة فقط.
لا شيء للتثبيت ولا حساب للإنشاء. كل معاينة وكل سطر CSS يُنتج محلياً في متصفحك، فالنص الذي تكتبه لا يغادر جهازك أبداً.
Frequently asked questions
كيف أضبط ظل النص؟
أضف خاصية CSS text-shadow إلى أي عنصر نص. الصيغة المختصرة هي text-shadow: offset-x offset-y blur-radius color — مثلاً text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) يُلقي ظلاً ناعماً بمقدار 2px لليمين و2px للأسفل مع تمويه 4px.
ما هو text-shadow في CSS؟
text-shadow هي خاصية CSS ترسم ظلاً أو أكثر خلف نص العنصر. يقبل كل ظل حتى أربع قيم: إزاحة أفقية (X)، وإزاحة عمودية (Y)، ونصف قطر تمويه اختياري، ولون — كـtext-shadow: 1px 1px 2px #000000.
كيف أضيف ظلاً في CSS؟
للنص، استخدم text-shadow في قاعدة العنصر، مثل h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. للصناديق والبطاقات والأزرار، استخدم box-shadow. text-shadow يتبع شكل الأحرف بينما box-shadow يتبع الصندوق المستطيل للعنصر.
كيف أضيف ظلاً للنص في أدوات التصميم؟
في أداة تصميم كـFigma أو Sketch أو Photoshop، أضف تأثير Drop Shadow لطبقة نص واضبط الإزاحة X/Y والتمويه واللون. هذه القيم الأربع تتعيّن تقريباً واحدة لواحدة في CSS: ظل Figma بـX 2، Y 2، Blur 4، أسود 40% يصبح text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
كيف أنشئ تأثير نص متوهج أو نيوني؟
التوهج النيوني عبارة عن عدة ظلال بنفس اللون الساطع مُرصوفة بإزاحة صفرية وتمويه متصاعد. مثال: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; على نص أبيض أمام خلفية داكنة. حمّل إعداد Neon هنا للحصول عليه فوراً.
كيف أنشئ نصاً ثلاثي الأبعاد أو بظل طويل؟
يستخدم كلا التأثيرين ظلالاً متعددة بإزاحة بدون تمويه. للنص البارز ثلاثي الأبعاد، راكم طبقات تنزل وتتجه يميناً بلون داكن تدريجياً. إعدادا 3D وLong shadow يبنيان هذه الطبقات تلقائياً.
كيف أنشئ نصاً بمحيط باستخدام text-shadow؟
ضع أربعة (أو ثمانية) ظلال صلبة حول النص، واحد لكل اتجاه، مع تمويه 0. مثال: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; يُعطي النص الأبيض محيطاً داكناً رفيعاً.
كيف أنشئ ظلال نص متعددة؟
افصلها بفواصل داخل تصريح text-shadow واحد: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. يرسمها المتصفح بالترتيب، بالظل الأول في الأعلى. هكذا تُبنى تأثيرات النيون والثلاثي الأبعاد والنار والمحيط.
هل يمكن أن يكون text-shadow بداخل (inset)؟
لا. على عكس box-shadow، لا تملك خاصية text-shadow كلمة inset المفتاحية ولا نصف قطر انتشار. لمحاكاة مظهر منقوش على خلفية فاتحة، أضف ظلاً فاتحاً خفياً أسفل نص رمادي داكن مباشرةً، مثل text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. إعداد Letterpress يُوضّح هذه الحيلة.
كيف أنشئ ظل نص في Tailwind CSS؟
يتضمن Tailwind CSS v4 مرافق ظل نص أصلية (text-shadow-sm وtext-shadow-md وtext-shadow-lg). لقيمة مخصصة، استخدم خاصية اعتباطية حيث تصبح المسافات شرطات سفلية: class="[text-shadow:2px_2px_4px_#00000066]".
هل أحتاج بادئات -webkit- أو -moz- لـtext-shadow؟
لا. text-shadow موحّد تماماً ومدعوم بدون بادئات في جميع المتصفحات الحديثة، لذا يكفي text-shadow: 1px 1px 2px #000; فقط.
ما الفرق بين text-shadow وbox-shadow؟
يُلقي text-shadow ظلاً من شكل الحروف (الأحرف نفسها)، بينما يُلقي box-shadow ظلاً من الصندوق المستطيل للعنصر. text-shadow لا يملك نصف قطر انتشار ولا خيار inset؛ box-shadow يملكهما.
كيف أضيف ظلاً خفياً لتحسين مقروئية النص؟
استخدم ظلاً داكناً ناعماً منخفض الشفافية مع إزاحة صغيرة وبضعة بيكسلات تمويه — مثلاً text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. هذا يرفع النص الأبيض أو الفاتح عن خلفية صورة أو تدرج.
كيف تتميز عن أدوات text-shadow الأخرى كـCSSmatic؟
يملك CSSmatic قسماً لظل النص لكنه يتعامل مع طبقة واحدة فقط — لا يمكنك تراكم ظلال متعددة لتأثيرات النيون أو ثلاثية الأبعاد أو المحيط دون تعديل الكود يدوياً. UtiloKit هو الأداة المجانية الوحيدة التي تجمع التراكم متعدد الطبقات وإعدادات مسبقة مسمّاة ومعاينة حية وتصديراً بنقرة واحدة بصيغ CSS وTailwind وReact Native.
كيف أنسخ CSS ظل النص المُولَّد، وهل يعمل بدون إنترنت؟
انقر نسخ CSS للحصول على تصريح جاهز للصق، أو نسخ Tailwind لفئة القيمة الاعتباطية، أو نسخ React Native للمعادل textShadowColor / textShadowOffset / textShadowRadius. استخدم مشاركة الرابط لحفظ الإعدادات الدقيقة في URL. الكل مجاني بدون تسجيل، يعمل محلياً ويستمر بدون إنترنت.
Related tools
عرض كل الأدوات
جديد منشئ تدرّجات CSS
أنشئ تدرّجات CSS خطية وشعاعية ومخروطية مع معاينة مباشرة.
جديد منشئ ظلال الصناديق CSS
أنشئ ظلال صناديق CSS متعددة الطبقات بإعدادات جاهزة ومعاينة مباشرة. انسخ شيفرة CSS أو القيمة أو نمط React فورًا.
جديد منشئ لوحات الألوان
أنشئ لوحات ألوان متكاملة ومتجاورة وثلاثية وأحادية اللون.
جديد منشئ منحنى Cubic Bezier
صمّم منحنى تسارع CSS بسحب نقاط التحكم، مع معاينة مباشرة.
جديد منشئ استدارة الحواف
صمّم زوايا CSS مستديرة وأشكالًا عضوية انسيابية بصريًا.
جديد ساحة تجربة CSS Flexbox
اضبط خصائص flex مع معاينة مباشرة وانسخ شيفرة CSS.