ตัวสร้าง CSS box-shadow
สร้างค่า box-shadow ด้วยภาพ ตั้งออฟเซ็ตแนวนอนและแนวตั้งเป็นพิกเซล รัศมีเบลอ (ขอบนุ่ม) สเปรด (ขยายหรือหดเงาก่อนเบลอ) สี ความทึบ และ inset ตามต้องการสำหรับเงาด้านใน
วิธีสร้าง box shadow
1. ตั้งออฟเซ็ต X และ Y — X บวกเลื่อนเงาไปขวา Y บวกเลื่อนลง
2. ปรับเบลอ (ความนุ่ม) และสเปรด (ขนาดก่อนเบลอ)
3. เลือกสีเงาและความทึบ
4. สลับ inset หากเงาควรปรากฏในกล่อง แล้วคัดลอก CSS
สูตรเงา
การยกการ์ดนุ่ม
offsetY 8px เบลอ 24px สเปรด 0 ดำที่ความทึบ 18% — การ์วลอยสไตล์ Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18)
เงาตกคม
เบลอ 0 สเปรด 0 offsetY 4px — ขอบแข็งเหมือนสติกเกอร์ยกจากหน้าเล็กน้อย
ปุ่มกดแบบ inset
เปิด inset พร้อมเบลอเล็ก — จำลองคอนโทรลที่ถูกกดหรือเว้าในองค์ประกอบ
เมื่อไหร่ควรใช้เครื่องมือนี้
• เมื่อปรับความลึก UI สำหรับการ์ด โมดอล และปุ่ม
• เมื่อเรียนรู้ว่าเบลอต่างจากสเปรดอย่างไร
• เมื่อบันทึกโทเค็นดีไซน์ด้วยค่าเงาที่แม่นยำ
อ่านสี่ตัวเลข
box-shadow: 0 8px 24px 0 หมายถึง x=0, y=8px ลง, เบลอ=24px, สเปรด=0 หากละสเปรด เบราว์เซอร์ตั้งสเปรดเป็น 0 เป็นค่าเริ่มต้น เบลอใหญ่กับออฟเซ็ตศูนย์สร้างเรืองแสง ออฟเซ็ตใหญ่กับเบลอเล็กสร้างแสงมีทิศทาง
คำถามที่พบบ่อย
ไวยากรณ์ box-shadow คืออะไร?
box-shadow: offset-x offset-y blur-radius spread-radius color; คำหลัก inset ตามต้องการทำให้เป็นเงาด้านใน
เบลอกับสเปรด?
เบลอทำขอบเงานุ่ม สเปรดขยายหรือหดรูปร่างเงาก่อนเบลอ — สเปรดบวกขยาย ลบหด
ควรใช้หน่วยอะไร?
เครื่องมือนี้ส่งออกพิกเซล (px) ตัวเลือกที่พบบ่อยที่สุดสำหรับเงา UI บนจอ
inset ทำอะไร?
Inset วาดเงาในกล่องขอบองค์ประกอบ — มีประโยชน์สำหรับอินพุตจมหรือหลุม
สีเงาโปร่งแสงได้หรือไม่?
ได้ ความทึบถูกใช้กับสีที่เลือก สร้างเอาต์พุต rgba สำหรับขอบเรียบบนพื้นหลังที่ต่างกัน