CSS Box Shadow คืออะไร?
CSS Box Shadow เป็น property ที่เพิ่มเงาให้ element ใน CSS ช่วยสร้างความลึก (Depth) และมิติให้กับ UI ทำให้เว็บดูมีมิติมากขึ้น
สามารถปรับตำแหน่ง ความเบลอ การกระจาย สี และความโปร่งใส ใช้ได้ทั้งเงาด้านนอกและด้านใน (Inset)
สร้าง Box Shadow CSS ออนไลน์
รูปแบบ CSS Box Shadow
- offset-x — ระยะเงาแนวนอน (ค่าบวก = ขวา, ค่าลบ = ซ้าย)
- offset-y — ระยะเงาแนวตั้ง (ค่าบวก = ล่าง, ค่าลบ = บน)
- blur-radius — ความเบลอของเงา (ค่ายิ่งสูง เงายิ่งเบลอ)
- spread-radius — การกระจายของเงา (ค่าบวก = ใหญ่ขึ้น, ค่าลบ = เล็กลง)
- color — สีของเงา (แนะนำใช้ rgba สำหรับความโปร่งใส)
- inset — เพิ่มคำนี้เพื่อให้เงาอยู่ด้านใน element
Ad Space
เคล็ดลับการใช้ Box Shadow
- ใช้เงานุ่มนวล (Subtle Shadow) สำหรับ Card และ Button เพื่อสร้าง Elevation
- ใช้หลาย Layer ของเงาซ้อนกันเพื่อเงาที่สมจริง
- ใช้สีเงาที่สอดคล้องกับ Theme (ไม่จำเป็นต้องเป็นสีดำเสมอ)
- ใช้ Inset Shadow สำหรับ Input Field ที่กำลัง Focus
- หลีกเลี่ยงเงาที่หนาเกินไป เพราะทำให้ UI ดูหนัก
คำถามที่พบบ่อย
วาง property box-shadow ใน CSS ของ element ที่ต้องการ เช่น box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
ได้ คั่นแต่ละเงาด้วยเครื่องหมายจุลภาค (,) เช่น box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
เงาด้านในของ element ทำให้ดูเหมือนกดลงไป นิยมใช้กับ Input Field ที่กำลัง Focus
Box Shadow มีผลต่อ Rendering Performance เล็กน้อย โดยเฉพาะ blur-radius สูง ควรหลีกเลี่ยงใช้กับ element ที่มี Animation ซ้ำๆ
ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไป
อ้างอิง
- MDN Web Docs — box-shadow (developer.mozilla.org)
- CSS-Tricks — box-shadow (css-tricks.com)
- Shadows Into Light — Material Design Shadow Guidelines (material.io)
เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่มีการส่งข้อมูลไปเซิร์ฟเวอร์ CSS code ที่สร้างได้รองรับทุกเบราว์เซอร์สมัยใหม่