תיעוד 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 אין spread ואין מילת מפתח inset. כדי לעבות את הצל סביב האותיות, ערמו כמה צללים או השתמשו ב--webkit-text-stroke לקו מתאר.

Text Shadow ב-CSS: תחביר, זוהר, קו מתאר ודוגמאות

text-shadow מצייר צל אחד או יותר מאחורי טקסט. למדו את ארבעת הערכים (היסט x, היסט y, טשטוש, צבע), איך לערום צללים לאפקטים של זוהר, קו מתאר ותלת-ממד, ואיך להשתמש בצל כדי לשמור על טקסט קריא על רקעים עמוסים.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-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
עוקב אחרי	צורות האותיות	הקופסה של האלמנט (ורדיוס הגבול שלה)
ערך spread	לא	כן
`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 אין spread ואין מילת מפתח inset. כדי לעבות את הצל סביב האותיות, ערמו כמה צללים או השתמשו ב--webkit-text-stroke לקו מתאר.

האם text-shadow משפיע על הפריסה?

לא. הצל רק מצויר; הוא לא תופס מקום ולא מזיז את התוכן שמסביב, כך שצל גדול יכול לחפוף אלמנטים קרובים.

מושגים קשורים