وثائق CSS قابلة للتشغيل: ظل النص text-shadow

Q: ما صيغة text-shadow؟

text-shadow: offset-x offset-y blur-radius color;، مثلًا text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. الإزاحتان مطلوبتان؛ والتمويه افتراضيًا 0، واللون افتراضيًا لون النص.

Q: كيف أضيف أكثر من ظل للنص؟

افصل بين الظلال بفواصل: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. يُرسم الظل الأول فوق الظلال التي تليه.

Q: هل لـ text-shadow قيمة انتشار spread مثل box-shadow؟

لا. لا يوجد في text-shadow انتشار ولا الكلمة المفتاحية inset. لتسميك الظل حول الحروف، كدّس عدة ظلال أو استخدم -webkit-text-stroke لحد خارجي.

ظل النص text-shadow في CSS: الصيغة والتوهج والحدود

ترسم text-shadow ظلًا أو أكثر خلف النص. تعلّم القيم الأربع (الإزاحة الأفقية، الإزاحة العمودية، التمويه، اللون)، وكيف تكدّس الظلال لتأثيرات التوهج والحدود والأبعاد الثلاثة، وكيف تستخدم الظل لإبقاء النص مقروءًا فوق الخلفيات المزدحمة.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تعمل text-shadow

تطلي text-shadow نسخة من النص خلفه، مزاحة وممَوَّهة. تعطيها إزاحة أفقية، وإزاحة عمودية، وتمويهًا اختياريًا، ولونًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b تعني 3px إلى اليمين (اتجاه فيزيائي، في كل اتجاهات الكتابة)، و3px إلى الأسفل، بلا تمويه، بلون كهرماني. الظل الثاني يموّه 6px ويستخدم أسود شبه شفاف، وهي الوصفة المعتادة لتأثير عمق خفيف.

الصيغة

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

القيمة	مطلوبة	المعنى
offset-x	نعم	القيمة الموجبة تحرك الظل إلى اليمين، والسالبة إلى اليسار (اتجاه فيزيائي)
offset-y	نعم	الموجبة تحركه إلى الأسفل، والسالبة إلى الأعلى
blur-radius	لا (الافتراضي 0)	مدى نعومة الحافة؛ القيم السالبة غير صالحة
color	لا (الافتراضي لون النص)	يمكن أن يأتي أولًا أو أخيرًا

تزيل text-shadow: none ظلًا موروثًا. غيّر القيم أدناه لترى تأثير كل منها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب -4px -4px 0 #16a34a و0 0 10px red وظلين تفصل بينهما فاصلة.

ظلال متعددة: التوهج والحدود والأبعاد الثلاثة

الفواصل تكدّس الظلال؛ والأول يُرسم في الأعلى. ثلاثة تأثيرات تأتي من هذه القاعدة الواحدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

التوهج: إزاحات صفرية، وتمويه متزايد، على خلفية داكنة.
الحدود: أربعة ظلال حادة، واحد لكل قطر. تنفع للحدود الرفيعة؛ ولحد أسمك ومتساوٍ ترسم -webkit-text-stroke: 2px #111827 (مدعومة في كل المتصفحات الحالية رغم البادئة) خطًا على حواف الحروف بدلًا من ذلك.
الأبعاد الثلاثة: سلسلة من الظلال الحادة كل منها أبعد بـ 1px، فتبدو الحروف بارزة.

إبقاء النص مقروءًا فوق خلفية مزدحمة

النص الأبيض فوق صورة أو نقش يفقد حوافه حيث تكون الخلفية فاتحة. ظل داكن ناعم يعيدها من دون صندوق مرئي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

الظل يساعد، لكنه لا يضمن التباين. للنص الطويل فوق صورة، أضف أيضًا طبقة صلبة أو متدرجة خلف النص.

الفرق بين text-shadow وbox-shadow

	text-shadow	box-shadow
يتبع	أشكال الحروف	صندوق العنصر (ونصف قطر زواياه)
قيمة الانتشار	لا	نعم
`inset`	لا	نعم
متعددة مفصولة بفواصل	نعم	نعم

للظلال على البطاقات والأزرار، راجع box-shadow.

أخطاء شائعة

ظلال ثقيلة داكنة على نص الجسم. تطمس أشكال الحروف. اترك الظلال للعناوين والتسميات القصيرة.
نسيان الإزاحة الثانية. text-shadow: 2px #000 غير صالحة؛ الإزاحتان مطلوبتان.
تمويه سالب. غير صالح ويُسقط التصريح كله.
توقع أن يشغل الظل مساحة. يُطلى فقط؛ الظلال الكبيرة قد تتداخل مع السطر التالي أو تُقص بـ overflow: hidden.
تأثيرات التوهج على خلفيات فاتحة. التوهج الفاتح على الأبيض غير مرئي. التوهج يحتاج إلى خلفية داكنة.

الأسئلة الشائعة

ما صيغة text-shadow؟

text-shadow: offset-x offset-y blur-radius color;، مثلًا text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. الإزاحتان مطلوبتان؛ والتمويه افتراضيًا 0، واللون افتراضيًا لون النص.

كيف أضيف أكثر من ظل للنص؟

افصل بين الظلال بفواصل: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. يُرسم الظل الأول فوق الظلال التي تليه.

كيف أصنع تأثير توهج على النص؟

استخدم ظلالًا بلا إزاحة مع تمويه، وغالبًا عدة ظلال بتمويه متزايد: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. على خلفية داكنة يبدو كتوهج نيون.

هل لـ text-shadow قيمة انتشار spread مثل box-shadow؟

لا. لا يوجد في text-shadow انتشار ولا الكلمة المفتاحية inset. لتسميك الظل حول الحروف، كدّس عدة ظلال أو استخدم -webkit-text-stroke لحد خارجي.

هل تؤثر text-shadow على التخطيط؟

لا. الظل يُطلى فقط؛ لا يشغل مساحة ولا يحرّك المحتوى المحيط، لذلك قد يتداخل الظل الكبير مع العناصر المجاورة.

مفاهيم ذات صلة