מחולל Box Shadow — חינם אונליין

מה הכלי עושה

מחולל ה־Box Shadow בונה box-shadow של CSS בעזרת סליידרים להיסט האופקי, להיסט האנכי, לטשטוש, לפיזור, לצבע ולאטימות. תיבת התצוגה המקדימה מתעדכנת תוך כדי גרירה, ושורת הפלט מוכנה להעתקה. בפתיחה מוצג צל רך, 10px מתחת לתיבה, עם 20px טשטוש ו־25% שחור.

ארבעת האורכים נכתבים בסדר של CSS: היסט x, היסט y, רדיוס טשטוש, רדיוס פיזור. היסט חיובי מזיז את הצל ימינה ולמטה, וערך שלילי מזיז אותו שמאלה ולמעלה. הטשטוש מרכך את הקצה, והפיזור מגדיל או מקטין את הצל לפני הטשטוש. הצבע נכתב כ־rgba(), כך שהאטימות כבר כלולה בו והצל משתלב עם כל רקע.

מתי להשתמש בו

• להוסיף עומק לכרטיסים, לחלונות מודאליים ולתפריטים נפתחים בעיצוב שטוח.
• להתאים את רמות הגובה (elevation) של מערכת עיצוב כמו Material Design.
• להוסיף לכפתורים אפקט עדין של פוקוס או של ריחוף (hover).
• ליצור זוהר צבעוני עם היסט אפס וצבע בוהק.

דוגמה

קלט

X 0, Y 10, טשטוש 20, פיזור 0, צבע #000000, אטימות 25%

פלט

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);

שאלות על הכלי