0

מחולל CSS Box Shadow

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

🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.

0px
4px
12px
0px
0.25
מעבד... 0%

תוצאה

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

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

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

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