תיעוד CSS עם דוגמאות להרצה: טשטוש ופילטרים

Q: איך מטשטשים אלמנט ב-CSS?

משתמשים ב-filter: blur(5px);. האורך הוא רדיוס הטשטוש: 0 חד, וערכים גדולים יותר מטושטשים יותר. הוא מטשטש את האלמנט ואת כל מה שבתוכו, כולל הטקסט והתמונות שלו.

Q: איך מטשטשים את הרקע שמאחורי אלמנט?

משתמשים ב-backdrop-filter: blur(10px); על האלמנט, עם רקע שקוף חלקית כמו rgb(255 255 255 / 0.5). התוכן של האלמנט עצמו נשאר חד, ומה שמאחוריו מטושטש: אפקט הזכוכית החלבית.

Q: מה ההבדל בין drop-shadow() ל-box-shadow?

box-shadow תמיד עוקב אחרי התיבה המלבנית של האלמנט. filter: drop-shadow() עוקב אחרי הצורה הנראית, כולל אזורים שקופים של PNG או SVG, כך שלצל של אייקון יש את קו המתאר של האייקון.

Q: איך הופכים תמונה לשחור לבן ב-CSS?

משתמשים ב-filter: grayscale(100%); (או grayscale(1)). הוסיפו transition ו-filter: grayscale(0) ב-hover כדי להחזיר את הצבע.

Q: אפשר להשתמש בכמה פילטרים בבת אחת?

כן, כתבו אותם מופרדים ברווחים: filter: grayscale(1) brightness(1.2) blur(1px);. הם מוחלים לפי הסדר, כך שהסדר יכול לשנות את התוצאה. הצהרת filter שנייה מחליפה את הראשונה.

לטשטש אלמנט

filter: blur() מקבל אורך, רדיוס הטשטוש. ככל שהוא גדול יותר, האלמנט מטושטש יותר:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

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

לטשטש את הרקע: backdrop-filter

כדי לטשטש את מה שמאחורי אלמנט (פאנל של זכוכית חלבית מעל תמונה או עמוד), השתמשו ב-backdrop-filter. התוכן של האלמנט עצמו נשאר חד. הוא צריך רקע שקוף כדי שהטשטוש ייראה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

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

כל פונקציות הפילטר, בזמן אמת

הזיזו כל מחוון. השורה שמתחת לתמונה היא ערך ה-filter המדויק, מוכן להעתקה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

רק פונקציות שהזזתם מהערך הנייטרלי שלהן נכתבות, וזה שומר על ערך קצר. brightness(1) או blur(0px) לא משנים כלום, אז אין סיבה לכתוב אותם.

פונקציות פילטר

פונקציה	ערך נייטרלי	מה היא עושה	דוגמה
`blur(r)`	`0`	טשטוש גאוסיאני ברדיוס r	`blur(4px)`
`brightness(n)`	`1`	כהה יותר מתחת ל-1, בהיר יותר מעליו	`brightness(0.7)`
`contrast(n)`	`1`	שטוח יותר מתחת ל-1, חד יותר מעליו	`contrast(1.3)`
`grayscale(n)`	`0`	1 (או 100%) אפור לגמרי	`grayscale(100%)`
`sepia(n)`	`0`	גוון חום חמים	`sepia(0.6)`
`saturate(n)`	`1`	0 אפור, מעל 1 חי יותר	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	מזיז כל גוון סביב גלגל הצבעים	`hue-rotate(90deg)`
`invert(n)`	`0`	1 הוא נגטיב צבעוני מלא	`invert(1)`
`opacity(n)`	`1`	כמו המאפיין `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		צל שעוקב אחרי הצורה	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

מספרים יכולים להיות גם אחוזים (grayscale(100%) שווה ל-grayscale(1)). כמה פונקציות נכנסות בערך אחד, מופרדות ברווחים, ומוחלות לפי הסדר: filter: grayscale(1) sepia(1) נותן גוון חום, בעוד ש-sepia(1) grayscale(1) מסתיים באפור רגיל.

drop-shadow עוקב אחרי הצורה

box-shadow הוא תמיד מלבן (לכל היותר עם פינות מעוגלות). drop-shadow() מצויר לפי הפיקסלים הנראים, כך שאייקון שקוף מקבל צל עם קו המתאר של האייקון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

הכוכב הראשון מטיל צל מרובע מהתיבה התוחמת הבלתי נראית שלו. השני מטיל צל בצורת כוכב. בניגוד ל-box-shadow, ל-drop-shadow() אין ערך spread ואין inset; עמוד ה-box-shadow מסביר אותם.

בעיית הקצוות המטושטשים

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

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

אפקטי hover עם filter

אפשר להחיל transition על filter, כך שקיר לוגואים שעובר מאפור לצבע או כרטיס שמעומעם עד שמרחפים מעליו הם שני כללים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

רחפו מעל אריח (או הגיעו אליו עם Tab) והצבע שלו יופיע בהדרגה.

טוב לדעת

ביצועים. רדיוסי טשטוש גדולים על שטחים גדולים הם היקרים ביותר, במיוחד backdrop-filter על אלמנטים שזזים או נגללים. בדקו בטלפון.
קריאות. לעולם אל תטשטשו טקסט שאנשים צריכים לקרוא, ובדקו ניגודיות של טקסט מעל פאנל חלבי.
שכבות. כל filter שאינו none יוצר stacking context חדש והופך ל-containing block של צאצאים עם position: fixed, כמו transform.

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

filter: blur(5). הרדיוס צריך יחידה: blur(5px).
שימוש ב-filter: blur() לפאנל חלבי. הוא מטשטש את הטקסט של הפאנל עצמו. השתמשו ב-backdrop-filter עם רקע שקוף.
backdrop-filter שלא מראה כלום. הרקע של האלמנט חייב להיות שקוף לפחות בחלקו, וחייב להיות משהו מאחוריו.
שתי הצהרות filter. השנייה מחליפה את הראשונה. שימו את כל הפונקציות בערך אחד.
צללים בצורת תיבה על אייקונים שקופים. השתמשו ב-filter: drop-shadow() במקום box-shadow.

שאלות נפוצות

איך מטשטשים אלמנט ב-CSS?

משתמשים ב-filter: blur(5px);. האורך הוא רדיוס הטשטוש: 0 חד, וערכים גדולים יותר מטושטשים יותר. הוא מטשטש את האלמנט ואת כל מה שבתוכו, כולל הטקסט והתמונות שלו.

איך מטשטשים את הרקע שמאחורי אלמנט?

משתמשים ב-backdrop-filter: blur(10px); על האלמנט, עם רקע שקוף חלקית כמו rgb(255 255 255 / 0.5). התוכן של האלמנט עצמו נשאר חד, ומה שמאחוריו מטושטש: אפקט הזכוכית החלבית.

מה ההבדל בין drop-shadow() ל-box-shadow?

box-shadow תמיד עוקב אחרי התיבה המלבנית של האלמנט. filter: drop-shadow() עוקב אחרי הצורה הנראית, כולל אזורים שקופים של PNG או SVG, כך שלצל של אייקון יש את קו המתאר של האייקון.

איך הופכים תמונה לשחור לבן ב-CSS?

משתמשים ב-filter: grayscale(100%); (או grayscale(1)). הוסיפו transition ו-filter: grayscale(0) ב-hover כדי להחזיר את הצבע.

אפשר להשתמש בכמה פילטרים בבת אחת?

כן, כתבו אותם מופרדים ברווחים: filter: grayscale(1) brightness(1.2) blur(1px);. הם מוחלים לפי הסדר, כך שהסדר יכול לשנות את התוצאה. הצהרת filter שנייה מחליפה את הראשונה.

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