25 דוגמאות ל-backdrop-filter ב-CSS בצירוף קוד ודוגמאות חיות

תכונת ה-backdrop-filter ב-CSS מחילה אפקטים ויזואליים על מה שנמצא מאחורי אלמנט. בניגוד ל-filter, שמשפיע על האלמנט עצמו, backdrop-filter משנה את מה שרואים מבעד לו – וכך יוצר זכוכית חלבית, שכבות מטושטשות ומשטחים עם שינויי צבע בלי לגעת בתוכן שמתחת.

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

אפקטי זכוכית בסיסיים

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

1. כרטיס זכוכית חלבית

זוהי נקודת הפתיחה הקלאסית, כשהיא מבוצעת נכון. כרטיס צף מעל נוף עירוני צבעוני באמצעות blur(16px) בשילוב saturate(180%), כך שהצבעים שמאחורי הזכוכית נשארים חיים. ה-border השקוף למחצה והצל העדין מוסיפים תחושת עומק פיזית.

/* backdrop-filter: blur() + saturate() */
.glass-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 36px 32px;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

2. סרגל ניווט דביק

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

/* backdrop-filter: blur() + brightness() */
.frosted-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    backdrop-filter: blur(12px) brightness(1.1);
}

3. חלון מודאלי

שכבת overlay חלבית במסך מלא שמכהה ומטשטשת את העמוד שמאחורי מודאל. השילוב של blur(20px) עם brightness(0.6) יוצר אפקט עמעום שמרגיש מתוחכם יותר משכבה שטוחה של שחור שקוף למחצה.

/* backdrop-filter: blur() + brightness() for dimming */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(20px) brightness(0.6);
    backdrop-filter: blur(20px) brightness(0.6);
}

4. Command Palette

Command palette בסגנון Spotlight של macOS עם blur(24px) ו-saturate(150%) מעל רקע gradient mesh. הטשטוש הכבד גורם לצבעי הרקע לחלחל פנימה כמו אור סביבתי, מה שנותן לפלטה הכהה תחושת שקיפות בלי לחשוף פרטים שמסיחים את הדעת.

/* backdrop-filter: blur() + saturate() - dark surface */
.command-palette {
    background: rgba(15, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

5. הודעת Toast

הודעת toast קומפקטית שממוקמת בפינה הימנית התחתונה. השילוב של blur(8px) קל עם saturate(120%) שומר עליה עדינה, אבל עדיין מובחנת מהתוכן שמאחוריה.

/* backdrop-filter: blur() + saturate() - subtle toast */
.toast {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

רכיבי UI

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

6. כרטיסי טבלת מחירים

שלוש חבילות תמחור עם עוצמת טשטוש עולה. החבילה הבסיסית משתמשת ב-blur(10px), חבילת ה-Pro המודגשת משתמשת ב-blur(16px) saturate(140%) למראה עשיר יותר, וחבילת ה-Enterprise משתמשת ב-blur(20px) brightness(0.9) ליצירת תחושה שקטה ויוקרתית. ההבדל בטשטוש יוצר היררכיה ויזואלית בצורה עדינה.

/* Three tiers with different blur intensities */
.tier-basic {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.tier-pro {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
.tier-enterprise {
    -webkit-backdrop-filter: blur(20px) brightness(0.9);
    backdrop-filter: blur(20px) brightness(0.9);
}

7. טופס התחברות

טופס אימות ממורכז מעל צילום עריכתי בגוונים חמים. הערך contrast(1.1) יחד עם brightness(0.9) יוצרים משטח זכוכית מעט כהה וחד יותר מטשטוש רגיל, מה שמקל על קריאת שדות הטופס. גם השדות עצמם משתמשים ב-blur(4px) קל ליצירת אפקט זכוכית רב-שכבתי.

/* backdrop-filter: blur() + brightness() + contrast() */
.login-panel {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(14px) brightness(0.9) contrast(1.1);
    backdrop-filter: blur(14px) brightness(0.9) contrast(1.1);
}

/* Layered glass on inputs */
.login-panel input {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

8. פאנל צד

ניווט צדדי בסגנון אפליקציה עם זכוכית חלבית. הערך saturate(140%) מונע מנוף ההרים להיראות דהוי מאחורי הטשטוש. פריטי התפריט משתמשים במצבי hover עם שינויי רקע עדינים, כדי לשמור על אסתטיקת הזכוכית.

/* backdrop-filter: blur() + saturate() - sidebar */
.glass-sidebar {
    width: 240px;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

9. בקרי נגן מדיה

נגן אודיו שמעוגן לתחתית וצף מעל תמונת הופעה. הערך saturate(200%) מעצים את צבעי תאורת הבמה שמחלחלים דרך הטשטוש, וכך יוצר פס בקרה דרמטי עם נגיעה ניאונית. הערך brightness(0.8) שומר עליו כהה מספיק כדי שהטקסט הלבן יישאר קריא.

/* backdrop-filter: blur() + brightness() + saturate() */
.player-bar {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px) brightness(0.8) saturate(200%);
    backdrop-filter: blur(12px) brightness(0.8) saturate(200%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

10. שכבת כיתוב על תמונה

פס כיתוב עדין בתחתית הצילום. השילוב של blur(6px) קל עם brightness(0.85) מרכך את הרקע בדיוק במידה הנדרשת כדי שטיפוגרפיית הסריף תהיה קריאה, בלי להסתיר את התמונה. זהו אפקט מאופק עם תחושה צילומית.

/* backdrop-filter: blur() + brightness() - photo caption */
.photo-caption {
    background: rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(6px) brightness(0.85);
    backdrop-filter: blur(6px) brightness(0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

11. ווידג'ט דאשבורד

כרטיס סטטיסטיקות עבור dashboard כהה. הערך brightness(1.2) מבהיר את הרקע הקוסמי המטושטש, בעוד saturate(80%) מפחית מעט את הרוויה שלו כדי שהכדורים הצבעוניים לא ישתלטו על הנתונים. התוצאה היא זוהר סביבתי עדין מאחורי מספרים חדים וברורים.

/* backdrop-filter: blur() + brightness() + saturate() */
.dashboard-widget {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(16px) brightness(1.2) saturate(80%);
    backdrop-filter: blur(16px) brightness(1.2) saturate(80%);
}

12. כדור בדולח דמוי עדשה

כדור זכוכית עגול שצף מעל רקע חי, עם blur(20px) יחד עם saturate(200%) ו-brightness(1.1). הטשטוש הכבד הופך את הרקע הצבעוני לאור סביבתי רך שממלא את הכדור, בעוד הרוויה הגבוהה שומרת על הצבעים עשירים. ב-hover הטשטוש נעלם והתמונה החדה נחשפת דרך הכדור כמו זכוכית מגדלת שנכנסת לפוקוס. הצורה המעגלית, בשילוב צל פנימי רדיאלי, משלימה את האשליה של אובייקט זכוכית פיזי.

/* backdrop-filter: blur() + saturate() - crystal orb */
.crystal-orb {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.1);
    backdrop-filter: blur(20px) saturate(200%) brightness(1.1);
    box-shadow:
        inset 0 -40px 60px rgba(0, 0, 0, 0.15),
        inset 0 40px 60px rgba(255, 255, 255, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.3);
    transition: backdrop-filter 0.6s, -webkit-backdrop-filter 0.6s;
}

.crystal-orb:hover {
    -webkit-backdrop-filter: blur(0px) saturate(120%) brightness(1);
    backdrop-filter: blur(0px) saturate(120%) brightness(1);
}

יצירתי ועריכתי

שש הדוגמאות הבאות לוקחות את backdrop-filter לכיוון עריכתי, קולנועי ויצירתי יותר. הן משלבות את התכונה עם sepia, contrast וקומפוזיציה דרמטית.

13. שכבת Overlay עריכתית יוקרתית

פס זכוכית אנכי מעל צילום עריכתי, שמשתמש ב-sepia(0.3) לצד blur(20px) כדי ליצור מראה חלבי חמים עם גוון עדין. ה-sepia מוסיף לרקע המטושטש חמימות אנלוגית שמזכירה פילם. יחד עם טיפוגרפיית סריף, מתקבלת תחושה של כפולת מגזין יוקרתית.

/* backdrop-filter: blur() + sepia() + brightness() */
.editorial-strip {
    background: rgba(30, 20, 10, 0.25);
    -webkit-backdrop-filter: blur(20px) sepia(0.3) brightness(0.9);
    backdrop-filter: blur(20px) sepia(0.3) brightness(0.9);
}

14. משטח ניאון Cyberpunk

העלאה של saturate(300%) יחד עם brightness(1.3) יוצרת רקע חי במיוחד, שגורם לאורות הניאון העירוניים לזלוג בעוצמה דרך הזכוכית. זוהר ה-border בצבע ציאן וקו ההדגשה העליון משלימים את אסתטיקת ה-cyberpunk. כאן backdrop-filter משמש ככלי יצירתי להגברה, לא רק כטשטוש.

/* backdrop-filter: blur() + saturate() + brightness() - neon */
.neon-surface {
    background: rgba(10, 10, 30, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(12px) saturate(300%) brightness(1.3);
    backdrop-filter: blur(12px) saturate(300%) brightness(1.3);
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.15),
        0 0 60px rgba(0, 255, 255, 0.05),
        inset 0 0 30px rgba(0, 255, 255, 0.03);
}

15. השוואת פאנלים מפוצלת

השוואת before/after נגררת. הצד השמאלי מציג את התמונה המקורית ללא פילטר. הצד הימני מחיל blur(16px) saturate(180%). גררו את המחיצה כדי להשוות. זהו דפוס שימושי בכל מצב שבו תרצו להמחיש מה בדיוק backdrop-filter עושה לרקע.

/* Split comparison - filtered vs. unfiltered */
.comparison-filtered {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
}

16. בלוק המלצה

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

/* backdrop-filter: blur() + brightness() - testimonial */
.testimonial-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px) brightness(1.05);
    backdrop-filter: blur(10px) brightness(1.05);
}

17. כרטיס פורטפוליו עם חשיפה ב-Hover

הכרטיס מתחיל ללא טשטוש. ב-hover ה-overlay עובר ל-blur(8px) contrast(1.2), וכך חושף את שם הפרויקט ואת ה-CTA. הערך contrast(1.2) מחדד מעט את הרקע המטושטש ויוצר זכוכית שמרגישה חדה יותר ופחות רכה. במקביל, התמונה עצמה גדלה בעדינות ומוסיפה תחושת תנועה.

/* backdrop-filter transition on hover */
.portfolio-overlay {
    -webkit-backdrop-filter: blur(0px) contrast(1);
    backdrop-filter: blur(0px) contrast(1);
    transition: backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s;
}
.portfolio-card:hover .portfolio-overlay {
    -webkit-backdrop-filter: blur(8px) contrast(1.2);
    backdrop-filter: blur(8px) contrast(1.2);
}

18. פאנל תכונות מוצר

layout מפוצל לרוחב, שבו חצי אחד מציג את תמונת המוצר בחדות והחצי השני מטושטש והופך לפאנל תיאור חלבי. הערך saturate(160%) שומר על צבעי המוצר חיים מבעד לזכוכית, וזה שימושי במיוחד בדפי שיווק שבהם צבעי המותג חשובים.

/* backdrop-filter: blur() + saturate() - split layout */
.feature-panel {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

מתקדם וניסיוני

שבע הדוגמאות האחרונות בוחנות שימושים פחות שגרתיים של backdrop-filter: hue-rotate, שכבות עומק, מסכות שעוקבות אחרי הסמן, grayscale, invert וטקסטורות רעש מבוססות SVG.

19. פס ספקטרום עם Hue-Rotate

שישה מקטעים, שכל אחד מהם מחיל ערך hue-rotate אחר על הנוף שמאחוריו. אותה סצנת הרים מופיעה בגוונים שונים לגמרי בכל פאנל. בלי JavaScript – רק CSS. זו הדגמה לכך ש-backdrop-filter יכול לשמש גם למניפולציית צבע, לא רק לטשטוש.

/* backdrop-filter: hue-rotate() - color spectrum */
.segment-1 {
    -webkit-backdrop-filter: hue-rotate(0deg) blur(2px);
    backdrop-filter: hue-rotate(0deg) blur(2px);
}
.segment-2 {
    -webkit-backdrop-filter: hue-rotate(60deg) blur(2px);
    backdrop-filter: hue-rotate(60deg) blur(2px);
}
.segment-3 {
    -webkit-backdrop-filter: hue-rotate(120deg) blur(2px);
    backdrop-filter: hue-rotate(120deg) blur(2px);
}
/* ...continue for 180, 240, 300 degrees */

20. שכבות עומק מדורגות

שלושה פאנלים מקוננים עם טשטוש הולך וגובר: blur(20px) מאחור, blur(8px) באמצע ו-blur(2px) מלפנים. לכל שכבה יש תווית עומק. המבנה המקונן יוצר אפקט depth-of-field אמיתי, שבו העיר שמאחור נעשית חדה יותר ככל שמתקרבים לקדמת הפריים.

/* Layered depth with increasing blur */
.depth-back {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 1;
}
.depth-mid {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2;
}
.depth-front {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 3;
}

21. חשיפת תוכן בסגנון Spotlight

כל הרקע מכוסה בשכבת blur(30px), אבל חור מעגלי סביב הסמן נשאר חד. הזיזו את העכבר כדי לחשוף את התמונה הלא מטושטשת. המסכה משתמשת ב-radial-gradient עם custom properties של CSS, שמתעדכנים באמצעות JavaScript כדי לעקוב אחרי הסמן.

/* backdrop-filter with mask for spotlight effect */
.blur-overlay {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    -webkit-mask-image: radial-gradient(
        circle 120px at var(--mx, 50%) var(--my, 50%),
        transparent 0%,
        black 100%
    );
    mask-image: radial-gradient(
        circle 120px at var(--mx, 50%) var(--my, 50%),
        transparent 0%,
        black 100%
    );
}

// Update cursor position as CSS custom properties
element.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    blurLayer.style.setProperty('--mx', x + '%');
    blurLayer.style.setProperty('--my', y + '%');
});

22. קבוצת כפתורי Liquid Glass

שורת כפתורים שבה כל כפתור הוא משטח זכוכית חלבית בפני עצמו. מצב הבסיס משתמש ב-blur(6px) saturate(120%). ב-hover הוא עובר ל-blur(10px) saturate(180%) עם זוהר חיצוני עדין. הכפתור הפעיל עולה ל-blur(12px) saturate(200%) brightness(1.3) יחד עם צל זוהר פנימי.

/* Liquid glass buttons with hover transitions */
.glass-btn {
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    transition: all 0.25s;
}
.glass-btn:hover {
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.glass-btn.active {
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.3);
    backdrop-filter: blur(12px) saturate(200%) brightness(1.3);
    box-shadow:
        0 0 24px rgba(255, 255, 255, 0.15),
        inset 0 0 12px rgba(255, 255, 255, 0.05);
}

23. חשיפת צבע מ-Grayscale לצבע מלא

הכרטיס מחיל grayscale(100%) blur(1px), כך שהשקיעה הצבעונית שמאחוריו נראית כמו רקע שחור-לבן דרמטי. ב-hover הפילטר עובר ל-grayscale(0%) blur(0px), וכל הצבע חוזר בבת אחת. המעבר של 0.6s מעניק לחשיפת הצבע תחושה קולנועית.

/* backdrop-filter: grayscale() transition on hover */
.grayscale-card {
    -webkit-backdrop-filter: grayscale(100%) blur(1px);
    backdrop-filter: grayscale(100%) blur(1px);
    transition: backdrop-filter 0.6s ease,
                -webkit-backdrop-filter 0.6s ease;
}
.grayscale-card:hover {
    -webkit-backdrop-filter: grayscale(0%) blur(0px);
    backdrop-filter: grayscale(0%) blur(0px);
}

24. פאנל Invert Contrast

שימוש ב-invert(1) contrast(1.5) בתור ה-backdrop-filter יוצר אפקט דרמטי של נגטיב. חלל האדריכלות הבהיר הופך לקומפוזיציה כהה ובעלת contrast גבוה. הטקסט מעוצב בשחור כדי להישאר קריא באופן טבעי מול הרקע ההפוך. זה בערך הכי רחוק שאפשר לקחת את backdrop-filter מטשטוש סטנדרטי.

/* backdrop-filter: invert() + contrast() */
.invert-panel {
    background: rgba(0, 0, 0, 0.05);
    border: 2px solid #000;
    -webkit-backdrop-filter: invert(1) contrast(1.5);
    backdrop-filter: invert(1) contrast(1.5);
    color: #000;
}

25. קומפוזיציה של רעש וזכוכית

הדוגמה האחרונה משלבת blur(16px) saturate(150%) עם טקסטורת רעש ב-CSS, שמוחלת דרך פילטר SVG מסוג feTurbulence על pseudo-element. שכבת הרעש מוסיפה גרעיניות עדינה למשטח החלבי ומחקה טוב יותר את הטקסטורה של זכוכית חלבית אמיתית, לעומת הטשטוש הדיגיטלי והחלק שדפדפנים מייצרים כברירת מחדל.

/* backdrop-filter + SVG noise texture overlay */
.noise-glass {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    overflow: hidden;
}

/* Noise grain via SVG feTurbulence */
.noise-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E
%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 
numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E
%3Crect width='100%25' height='100%25' filter='url(%23n)' 
opacity='0.04'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
}

Interactive Backdrop-Filter Explorer

השתמשו בסליידרים שלמטה כדי להתנסות בכל פונקציה של backdrop-filter בזמן אמת. פלט הקוד מתעדכן תוך כדי התאמת הערכים.

Backdrop-Filter Explorer

Filtered Area

blur 12px

saturate 100%

brightness 100%

contrast 100%

hue-rotate 0deg

grayscale 0%

sepia 0%

invert 0%

Reset

Copy

Best Practices

אחרי שבניתי את כל 25 הדוגמאות שלמעלה, הנה הטכניקות המרכזיות והעצות הפרקטיות לשימוש ב-backdrop-filter בפרודקשן.

סיכום טכניקות יצירתיות

ביצועים

backdrop-filter מואץ GPU בכל הדפדפנים המודרניים. עם זאת, ערכי blur גבוהים על אלמנטים גדולים יקרים יותר לעיבוד.

• שמרו על ערכי blur() מתחת ל-20px כאשר מדובר באלמנטים שמכסים אזורי Viewport גדולים.
• הימנעו מערימה של כמה אלמנטים עם backdrop-filter זה על גבי זה – כל אחד מהם מפעיל מעבר compositing נפרד.
• השתמשו ב-will-change: backdrop-filter על אלמנטים שעוברים transition בערכי הפילטר, ואז הסירו אותו לאחר סיום המעבר.
• במובייל, בדקו ביצועים היטב. מכשירים ישנים יותר עלולים להוריד פריימים עם blur כבד על שכבות overlay במסך מלא.
• אם הביצועים בעייתיים, שקלו להשתמש בתמונת רקע מטושטשת מראש בתור fallback במקום backdrop-filter בזמן אמת.

נגישות וקריאות

• ודאו תמיד שיש contrast מספק בין הטקסט לרקע המטושטש. השתמשו בצבע רקע שקוף למחצה על האלמנט המסונן כדי להבטיח contrast מינימלי.
• אל תסמכו על backdrop-filter לבדו כדי להבטיח קריאות טקסט – אם הפילטר לא נטען, רקע ה-rgba() שלכם עדיין צריך לשמור על הקריאות.
• כבדו את prefers-reduced-motion כאשר אתם מנפישים מעברי backdrop-filter. יש משתמשים שרגישים לשינויי blur ורוויה.
• בדקו גם עם backdrop-filter כבוי, מכיוון שעדיין יש דפדפנים או קונפיגורציות מסוימות שלא תומכים בו. ה-fallback צריך להיות רקע מלא או שקוף למחצה, כזה ששומר על הקריאות.

תבנית Fallback לדפדפנים

/* Always provide a fallback background */
.glass-element {
    background: rgba(0, 0, 0, 0.7);              /* fallback */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Enhanced background when filter is supported */
@supports (backdrop-filter: blur(1px)) {
    .glass-element {
        background: rgba(0, 0, 0, 0.3);          /* lighter when blur works */
    }
}

שאלות נפוצות

שאלות נפוצות על שימוש ב-backdrop-filter ב-CSS.

סיכום

backdrop-filter עושה הרבה יותר מאשר ליצור כרטיסי זכוכית חלבית. הצגתי כאן 25 דוגמאות שמכסות סרגלי ניווט דביקים, command palettes, נגני מדיה, משטחי ניאון בסגנון cyberpunk, שכבות עומק, spotlights שעוקבים אחרי הסמן, אפקטים של grayscale, זכוכית הפוכה ומשטחים עם טקסטורת רעש.

התובנה המרכזית היא ש-backdrop-filter מקבל את אותן פונקציות כמו filter – blur, saturate, brightness, contrast, hue-rotate, grayscale, sepia ו-invert – אך מחיל אותן על ה-backdrop ולא על האלמנט עצמו. שילוב בין הפונקציות הללו, שימוש בעוצמות שונות, והצמדה שלהן למסכות CSS, ל-transitions ול-pseudo-elements פותחים טווח רחב של אפשרויות יצירתיות.

לשימוש בפרודקשן: ספקו תמיד רקע rgba() בתור fallback, כללו את הקידומת -webkit- עבור Safari, בדקו את ביצועי ה-blur במובייל, וודאו שה-contrast של הטקסט עובד היטב גם בלי הפילטר.