תיעוד CSS עם דוגמאות להרצה: צל לתיבה (Box Shadow)

Q: מה התחביר של box-shadow?

box-shadow: offset-x offset-y blur spread color;, למשל box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. רק שני ההיסטים הם חובה; הוסיפו inset כדי לצייר את הצל בתוך התיבה.

CSS Box Shadow: תחביר, spread, inset ודוגמאות

box-shadow מצייר צללים סביב התיבה של אלמנט. למדו את חמשת הערכים (x, y, blur, spread, color), צללים פנימיים עם inset, שכבות של כמה צללים לעומק מציאותי, טבעות פוקוס שנוצרות עם spread, והטעויות שגורמות לצללים להיראות עכורים.

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

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך box-shadow עובד

box-shadow צובע צל סביב תיבת הגבול של אלמנט. הוא עוקב אחרי border-radius, לא תופס מקום בפריסה, וצריך לפחות שני ערכים: כמה להזיז אותו אופקית וכמה אנכית.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

התחביר

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

ערך	משמעות	ברירת מחדל
`inset`	מצייר את הצל בתוך התיבה, כמו אזור שקוע	בחוץ
offset-x	חיובי מזיז ימינה, שלילי שמאלה	חובה
offset-y	חיובי מזיז למטה, שלילי למעלה	חובה
blur	כמה רך הקצה; לא יכול להיות שלילי	`0` (קצה חד)
spread	מגדיל (חיובי) או מקטין (שלילי) את הצל	`0`
color	כל צבע; שחור חצי שקוף נראה בדרך כלל הכי טוב	צבע הטקסט

מספר האורכים קובע את המשמעות שלהם: שניים הם ההיסטים, שלושה מוסיפים blur, ארבעה מוסיפים spread. נסו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו 0 0 0 4px #f59e0b (טבעת), inset 0 0 12px #2563eb, ו--8px -8px 0 #16a34a.

Spread: טבעות וצללים בצד אחד

Spread משנה את גודל הצל לפני הטשטוש. יוצאים ממנו שני דפוסים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

טבעת: בלי היסט, בלי blur, רק spread. בניגוד לגבול, היא לא משנה את גודל האלמנט, ולכן היא מחוון פוקוס טוב (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
טבעת עם רווח: ערמו spread לבן מתחת ל-spread צבעוני וגדול יותר.
צד אחד בלבד: הזיזו את הצל למטה וכווצו אותו עם spread שלילי, כך שהוא מציץ רק מלמטה.

צללים בשכבות לעומק מציאותי

לצללים אמיתיים יש חלק כהה וחד קרוב לאובייקט, וחלק רך וחלש רחוק יותר. שתיים או שלוש שכבות מחקות את זה הרבה יותר טוב מ-blur גדול אחד:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

הצל הראשון ברשימה נצבע למעלה. שמרו על צבעי צל של שחור חצי שקוף או גוון כהה של הרקע, אף פעם לא אפור מלא, כדי שהם יכהו את מה שמתחתם.

צללי inset

inset מצייר את הצל בתוך תיבת ה-padding, כאילו המשטח שקוע פנימה. זה מתאים לשדות טקסט, לאזורים שקועים ולכפתורים לחוצים:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

צל inset מצויר מעל הרקע אבל מתחת לתוכן. צללים שעוקבים אחרי צורות האותיות במקום אחרי התיבה הם text-shadow.

טעויות נפוצות

צללים בשחור מלא ואטום. הם נראים כמו קו מתאר כהה. השתמשו באלפא של 10% עד 30%.
blur ענק אחד בשביל עומק. שלבו צל קטן וחד עם צל גדול ורך.
צל שנחתך בקצה. אב קדמון עם overflow: hidden חותך אותו; הוסיפו padding לאב הקדמון או העבירו את כלל ה-overflow.
blur שלילי. הוא לא תקין, וכל ההצהרה נזרקת.
הנפשה של box-shadow על הרבה אלמנטים. הוא צובע מחדש בכל פריים. בעמודים כבדים, הנפישו במקום זאת את ה-opacity של פסאודו-אלמנט שנושא את הצל הגדול יותר.

שאלות נפוצות

מה התחביר של box-shadow?

box-shadow: offset-x offset-y blur spread color;, למשל box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. רק שני ההיסטים הם חובה; הוסיפו inset כדי לצייר את הצל בתוך התיבה.

מה עושה spread ב-box-shadow?

הוא מגדיל (ערך חיובי) או מקטין (ערך שלילי) את הצל לפני הטשטוש. צל בלי היסט, בלי blur ועם spread של 3px הוא טבעת מלאה של 3px סביב האלמנט.

איך שמים צל רק למטה?

מזיזים אותו למטה ומכווצים אותו עם spread שלילי כך שהצדדים נעלמים: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

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

לא. צל לא תופס מקום ולא מזיז אלמנטים אחרים, ולכן הוא דרך טובה להוסיף טבעת פוקוס או הרמה ב-hover בלי תזוזה בפריסה. הוא יכול להיחתך על ידי overflow: hidden של אב קדמון.

אפשר להגדיר כמה box shadows?

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

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