איך יוצרים box-shadow ב-CSS ומעתיקים את הקוד?

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

האם אפשר לערום כמה צללים על אלמנט אחד?

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

איך יוצרים צל פנימי?

בחרו שכבה והפעילו צל פנימי, או טענו את ההגדרה המוכנה פנימי (Inset). הפלט יכלול אז את מילת המפתח inset עבור אותה שכבה.

אפשר לקבל מחלקת Tailwind במקום CSS רגיל?

כן. בנוסף להצהרת ה-CSS, הכלי מייצר מחלקת ערך שרירותי של Tailwind בצורה shadow-[...], כשרווחים מוחלפים בקווים תחתונים, מוכנה להדבקה בקוד שלכם.

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

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

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

🎨

מחולל Box Shadow ב-CSS בחינם

בונה ויזואלי לצל CSS עם תצוגה מקדימה חיה, ריבוד שכבות מרובות, בורר צבעים, מתג inset והעתקה בלחיצה. כולל פריסות Material, neumorphism וזוהר.

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

פועל לא-מקוון לאחר טעינה

תצוגה מקדימה של הרקע

גרור את התיבה כדי למקם את הצל של השכבה הפעילה - החזק Shift לשליטה עדינה

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

הגדרות מוכנות

צבע תיבה

רדיוס גבול (16px)

x (0px)

y (4px)

טשטוש (12px)

פיזור (0px)

צבע

אטימות (15%)

צל פנימי

שימושים נפוצים

צללים של כרטיסיות UIבנה צללים אלגנטיים של כרטיס עבור לוחות מחוונים, רשתות מוצר ולוחות מחוונים.
אפקטי לחץ כפתורבנה צללי כפתור החוקים לעומק העולם האמיתי ומצבי הטל.
Neumorphism רך UIצור את המראה הרך-UI neumorphism עם צללים קלים ואפלים קיבולים.
צללי Modal & Popoverצור את התחושה המועלה, צפה עבור דיאלוגים וקיבוצים.
אפקטי זוהר וטבעת פוקוסצור אפקטי דגש זוהר, טבעות פוקוס וכדי אנו-סגנון.

כיצד זה עובד

מחולל box-shadow הוא כלי React בצד לקוח בלבד — ללא שרת, ללא ספרייה. הוא שומר רשימה של אובייקטי שכבת צל במצב, מרכיב מחרוזות CSS box-shadow תקינות בכל שינוי באמצעות מעצב rgba() כתוב-יד, ומחיל אותן ישירות על אלמנט תצוגה מקדימה דרך מאפיין style של React כך שמנוע ההצגה של הדפדפן עצמו מצייר את התוצאה מיד.

1
פרמטרי שכבה מזינים את המעצב
כל שכבת צל שומרת היסטי x/y, טשטוש, פיזור, צבע הקס וערך שקיפות. בכל שינוי, פונקציית shadowToCss קטנה ממירה את צבע ההקס לרכיבי RGB עם ביטוי רגולרי, ואז מרכיבה את מחרוזת ה-rgba() — לדוגמה, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). מספר שכבות מחוברות בפסיקים.
2
הדפדפן מציג את התצוגה המקדימה החיה
המחרוזת המורכבת מוקצית למאפיין הסגנון boxShadow של אלמנט div ישירות ב-JSX. React מעדכן את מאפיין ה-DOM, ומנוע ה-CSS של הדפדפן צובע את הצל מיד — אין קנבס או WebGL מעורבים, רק הצגת CSS מקורית.
3
גרירה-למיקום משתמשת ב-Pointer Events API
לחיצה וגרירה של תיבת התצוגה המקדימה קוראת ל-setPointerCapture על האלמנט, ואז עוקבת אחרי דלתות onPointerMove כדי לעדכן את היסטי ה-x וה-y של השכבה הפעילה בזמן אמת. החזקת Shift מחילה מקדם קנה מידה של 0.25x למיקום עדין.
4
הפלט מועתק ללוח
הכלי מפיק שני פורמטים פלט מאותם נתוני שכבה: הצהרת CSS box-shadow סטנדרטית, ומחלקת ערך שרירותי של Tailwind (shadow-[...]) שבה רווחים מוחלפים בקווים תחתונים לפי חוקי התחביר של Tailwind. העתקה בלחיצה אחת משתמשת ב-navigator.clipboard.writeText.