מחולל אפקט זכוכית מחוספסת ב-CSS

הכלי הזה בונה אפקט CSS של זכוכית מחוספסת (glassmorphism) על ידי שילוב רקע שקוף למחצה עם backdrop-filter: blur() — גררו את המחוונים מעל התצוגה המקדימה הצבעונית כדי לראות איך כרטיס הזכוכית מטשטש את מה שנמצא מאחוריו, ואז העתיקו את ה-CSS. הכלי גם מפיק את קידומת ה-webkit-backdrop-filter- שדרושה ל-Safari, מכיוון ש-backdrop-filter עדיין דורש אותה שם.

מהו הכלי הזה?

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

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

מקור: Filter Effects Module Level 1, W3C — מגדיר את backdrop-filter, המאפיין שעליו בנוי האפקט הזה.

למה להשתמש בו?

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

איך להשתמש

בחרו צבע רקע וכווננו את שקיפותו — שקיפות נמוכה (10–25%) נקראת כזכוכית; שקיפות גבוהה יותר נראית יותר כמו פאנל צבעוני אטום.
הגבירו את עוצמת הטשטוש כדי לטשטש את מה שנמצא מאחורי האלמנט — זה מה שבפועל יוצר את מראה הזכוכית המחוספסת, בנפרד מהשקיפות עצמה.
כווננו את שקיפות המסגרת כדי להוסיף קצה בהיר עדין, מה שעוזר לכרטיס הזכוכית להיקרא כמשטח נפרד במקום להתמזג עם הרקע.
הגדירו את רדיוס הפינות לפינות מעוגלות — כרטיסי glassmorphism כמעט תמיד מעוגלים, לעיתים רחוקות בעלי פינות חדות.
העתיקו את ה-CSS שנוצר והדביקו אותו בגיליון הסגנונות שלכם. זכרו שהאלמנט צריך משהו עם צבע או מרקם מאחוריו — glassmorphism בלתי נראה מעל רקע שטוח בצבע אחיד.

דוגמה

קלט

רקע: לבן בשקיפות 20% · טשטוש: 10px · שקיפות מסגרת: 30% · רדיוס: 16px

פלט

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

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

תמיכה ב-Safari ובדפדפנים

backdrop-filter נתמך בגרסאות הנוכחיות של Chrome, Firefox, Edge ו-Safari, אך היסטורית Safari דרש את הקידומת webkit-backdrop-filter- לצד המאפיין הלא-מקודם כדי לרנדר את הטשטוש — בלעדיה, גרסאות ישנות יותר של Safari מתעלמות בשקט מהטשטוש ומציגות רק את הרקע השקוף השטוח. מסיבה זו הכלי הזה תמיד מפיק את שתי ההצהרות.

עיינו בתיעוד של backdrop-filter ב-MDN לפרטי תאימות דפדפנים עדכניים: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

מדוע ל-glassmorphism נדרש משהו מאחוריו

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

שילוב עם אפקטי CSS אחרים

כרטיסי glassmorphism משלבים לעיתים קרובות box-shadow עדין מתחת לעומק נוסף. צרו את ה-CSS של הזכוכית המחוספסת כאן, ואז הוסיפו צל רך עם מחולל ה-Box Shadow והחילו את שתי ההצהרות על אותו אלמנט.

→ מחולל Box Shadow · מחולל Border Radius

שאלות נפוצות

מדוע אפקט הזכוכית לא מופיע בדף שלי?

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

האם אני צריך את הקידומת webkit-backdrop-filter-?

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

מה ההבדל בין שקיפות הרקע לטשטוש?

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

האם אפשר להשתמש ב-backdrop-filter על כל אלמנט?

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

מדוע המסגרת שלי בקושי נראית?

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