ה- backdrop-filter הוא אחת מהתכונות הכי אלגנטיות שקיבלנו ב- CSS בשנים האחרונות – הוא מאפשר ליצור אפקט זכוכית מטושטשת (Glassmorphism), שדרכו אפשר לראות טשטוש של האלמנטים שנמצאים מאחוריו, ממש כמו זכוכית חלבית בעיצוב יוקרתי.
יש פרויקטים שנעצב ונפתח ונרצה שיהיה בהן אפקט כזה שמדמה לוח זכוכית/
מתי כדאי להשתמש בזה?
לקונטיינר ב- Header שיכיל תפריט, לוגו וכפתור ונרצה שיראה יוקרתי ומעניין כדי להוסיף שכבת עומק מודרנית על תמונה או ווידאו.
💡 שימו לב – הדפדפן חייב לתמוך ב־backdrop-filter (רוב המודרניים תומכים, כולל Safari ו-Chrome), וכדי לראות את האפקט בפועל – חייב שיהיה משהו מאחורי האלמנט שיטושטש.
selector {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px); /* תמיכה ב-Safari */
box-shadow: 0px 0px 30px 0 rgba(227, 228, 237, 0.37);
border: 2px solid rgba(255, 255, 255, 0.18);
background-color: rgba(255, 255, 255, 0.1); /* רקע חצי שקוף בשביל לראות את האפקט */
}