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
เคล็ดลับและแนวปฏิบัติที่ดี
- ใช้ rgba() สำหรับสีเงาที่ Opacity 10-20% เพื่อเงาที่นุ่มนวลเป็นธรรมชาติบนทุกพื้นหลัง
- ซ้อนเงา 2 ชั้น — ชั้นแน่นสีเข้ม ชั้นกว้างสีอ่อน — เพื่อจำลองพฤติกรรมแสงจริง
- ให้ทิศทางเงาสม่ำเสมอทุก UI Element เพื่อรักษาแหล่งกำเนิดแสงเดียวที่สอดคล้องกัน
- ลด blur-radius และ spread บนมือถือ เพราะหน้าจอเล็กทำให้เงาหนักๆ ดูอึดอัด
- ใช้ CSS Transition กับ box-shadow สำหรับ Hover State เพื่อเอฟเฟกต์ยกขึ้นที่ลื่นไหลบน Card
กรณีใช้งานจริง
tools.boxshadow.info.useCases.content
เพิ่มเงา Material Design ให้ Dashboard Card เพื่อสร้างลำดับความสำคัญทางสายตาระหว่างเนื้อหา
สร้างเอฟเฟกต์ปุ่มลอย (FAB) สำหรับเว็บแอปมือถือที่เลียนแบบสไตล์ iOS และ Android
สร้าง UI แบบ Neumorphism โดยผสมเงาด้านนอกและด้านใน (Inset) บนพื้นหลังสีนุ่ม
ออกแบบ Dropdown Menu ด้วยเงาที่แยกเมนูออกจากเนื้อหาหน้าเว็บด้านล่างอย่างชัดเจน
ใส่เอฟเฟกต์เรืองแสงให้รูปสินค้าเด่นบนเว็บ E-commerce เพื่อเน้นโปรโมชั่นจำกัดเวลา
เคล็ดลับและแนวปฏิบัติที่ดี
tools.boxshadow.info.tips.content
ใช้ rgba() สำหรับสีเงาที่ Opacity 10-20% เพื่อเงาที่นุ่มนวลเป็นธรรมชาติบนทุกพื้นหลัง
ซ้อนเงา 2 ชั้น — ชั้นแน่นสีเข้ม ชั้นกว้างสีอ่อน — เพื่อจำลองพฤติกรรมแสงจริง
ให้ทิศทางเงาสม่ำเสมอทุก UI Element เพื่อรักษาแหล่งกำเนิดแสงเดียวที่สอดคล้องกัน
ลด blur-radius และ spread บนมือถือ เพราะหน้าจอเล็กทำให้เงาหนักๆ ดูอึดอัด
ใช้ CSS Transition กับ box-shadow สำหรับ Hover State เพื่อเอฟเฟกต์ยกขึ้นที่ลื่นไหลบน Card
ข้อผิดพลาดที่พบบ่อย
tools.boxshadow.info.commonMistakes.content
ใช้เงาสีดำสนิท (#000) ที่ Opacity สูงซึ่งดูไม่เป็นธรรมชาติ ควรใช้โทนน้ำเงินเข้มหรือเทาแทน
ใส่ค่าเงาเหมือนกันทุก Element โดยไม่แบ่งระดับ Elevation ตาม Visual Hierarchy
ทำ Animation กับ box-shadow โดยตรง แทนที่จะใช้ transform: scale() ที่ใช้ GPU ได้ลื่นกว่า
ตั้ง spread-radius สูงเกินไป ทำให้เงาดูเป็นขอบทึบแทนที่จะเป็นเงาเบลอนุ่มนวล
เปรียบเทียบกับเครื่องมืออื่น
ต่างจากแผงเงาของ Figma ที่สร้างเงาสำหรับดีไซน์เท่านั้น เครื่องมือนี้สร้าง CSS Code พร้อมใช้งาน พร้อมตัวอย่างสดที่ตรงกับสิ่งที่เบราว์เซอร์จะ Render
เมื่อเทียบกับการเขียนค่า box-shadow เอง เครื่องมือนี้ให้ทดลองซ้อนเงาหลายชั้นและ Inset ผ่าน Slider ประหยัดเวลาลองผิดลองถูกอย่างมาก
คำถามที่พบบ่อย
วาง 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 ซ้ำๆ
ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไป
box-shadow ใส่เงาตามรูปทรง Box ของ Element ส่วน CSS filter: drop-shadow() ตามเส้นขอบจริงรวมส่วนโปร่งใส เหมาะกับรูป PNG
ได้ แต่ Animation box-shadow โดยตรงค่อนข้างหนัก ควรใช้ Pseudo-element ที่มีเงาแล้ว Animate Opacity แทนจะลื่นกว่า
ตั้ง spread-radius เป็นค่าลบเท่ากับ blur-radius แล้วใช้ offset-x หรือ offset-y ดันเงาไปด้านที่ต้องการ
อ้างอิง
- 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 ที่สร้างได้รองรับทุกเบราว์เซอร์สมัยใหม่