ReSuMeYaDev

เครื่องมือออกแบบ

Box Shadow Generator — สร้างเงา CSS แบบลากเลื่อน

ลาก slider ปรับ offset x/y, blur, spread, สี และความโปร่งใส พร้อม preview สด — รองรับเงาหลายชั้น (multi-layer) และ Inset Shadow พร้อม copy CSS code

  • ใช้งานฟรี
  • CSS Box Shadow
  • หลายชั้น + Inset
  • รองรับมือถือ

คำจำกัดความ

CSS Box Shadow คืออะไร?

CSS Box Shadow เป็น property ที่เพิ่มเงาให้ element ใน CSS ช่วยสร้างความลึก (Depth) และมิติให้กับ UI ทำให้เว็บดูมีมิติมากขึ้น

สามารถปรับตำแหน่ง ความเบลอ การกระจาย สี และความโปร่งใส ใช้ได้ทั้งเงาด้านนอกและด้านใน (Inset)

Syntax

รูปแบบ CSS Box Shadow

  • offset-x — ระยะเงาแนวนอน (ค่าบวก = ขวา, ค่าลบ = ซ้าย)
  • offset-y — ระยะเงาแนวตั้ง (ค่าบวก = ล่าง, ค่าลบ = บน)
  • blur-radius — ความเบลอของเงา (ค่ายิ่งสูง เงายิ่งเบลอ)
  • spread-radius — การกระจายของเงา (ค่าบวก = ใหญ่ขึ้น, ค่าลบ = เล็กลง)
  • color — สีของเงา (แนะนำใช้ rgba สำหรับความโปร่งใส)
  • inset — เพิ่มคำนี้เพื่อให้เงาอยู่ด้านใน element

กรณีใช้งาน

กรณีใช้งานจริง

  • เพิ่มเงา Material Design ให้ Dashboard Card เพื่อสร้างลำดับความสำคัญทางสายตาระหว่างเนื้อหา
  • สร้างเอฟเฟกต์ปุ่มลอย (FAB) สำหรับเว็บแอปมือถือที่เลียนแบบสไตล์ iOS และ Android
  • สร้าง UI แบบ Neumorphism โดยผสมเงาด้านนอกและด้านใน (Inset) บนพื้นหลังสีนุ่ม
  • ออกแบบ Dropdown Menu ด้วยเงาที่แยกเมนูออกจากเนื้อหาหน้าเว็บด้านล่างอย่างชัดเจน
  • ใส่เอฟเฟกต์เรืองแสงให้รูปสินค้าเด่นบนเว็บ E-commerce เพื่อเน้นโปรโมชั่นจำกัดเวลา

เคล็ดลับ

เคล็ดลับและแนวปฏิบัติที่ดี

  • ใช้ rgba() สำหรับสีเงาที่ Opacity 10-20% เพื่อเงาที่นุ่มนวลเป็นธรรมชาติบนทุกพื้นหลัง
  • ซ้อนเงา 2 ชั้น — ชั้นแน่นสีเข้ม ชั้นกว้างสีอ่อน — เพื่อจำลองพฤติกรรมแสงจริง
  • ให้ทิศทางเงาสม่ำเสมอทุก UI Element เพื่อรักษาแหล่งกำเนิดแสงเดียวที่สอดคล้องกัน
  • ลด blur-radius และ spread บนมือถือ เพราะหน้าจอเล็กทำให้เงาหนักๆ ดูอึดอัด
  • ใช้ CSS Transition กับ box-shadow สำหรับ Hover State เพื่อเอฟเฟกต์ยกขึ้นที่ลื่นไหลบน Card

หลีกเลี่ยง

ข้อผิดพลาดที่พบบ่อย

  • ใช้เงาสีดำสนิท (#000) ที่ Opacity สูงซึ่งดูไม่เป็นธรรมชาติ ควรใช้โทนน้ำเงินเข้มหรือเทาแทน
  • ใส่ค่าเงาเหมือนกันทุก Element โดยไม่แบ่งระดับ Elevation ตาม Visual Hierarchy
  • ทำ Animation กับ box-shadow โดยตรง แทนที่จะใช้ transform: scale() ที่ใช้ GPU ได้ลื่นกว่า
  • ตั้ง spread-radius สูงเกินไป ทำให้เงาดูเป็นขอบทึบแทนที่จะเป็นเงาเบลอนุ่มนวล

เปรียบเทียบ

เปรียบเทียบกับเครื่องมืออื่น

ต่างจากแผงเงาของ Figma ที่สร้างเงาสำหรับดีไซน์เท่านั้น เครื่องมือนี้สร้าง CSS Code พร้อมใช้งาน พร้อมตัวอย่างสดที่ตรงกับสิ่งที่เบราว์เซอร์จะ Render

เมื่อเทียบกับการเขียนค่า box-shadow เอง เครื่องมือนี้ให้ทดลองซ้อนเงาหลายชั้นและ Inset ผ่าน Slider ประหยัดเวลาลองผิดลองถูกอย่างมาก

FAQ

คำถามที่พบบ่อย

01 Box Shadow ใช้อย่างไรใน CSS?

วาง property box-shadow ใน CSS ของ element ที่ต้องการ เช่น box-shadow: 5px 5px 10px rgba(0,0,0,0.2);

02 เพิ่มเงาหลายชั้นได้ไหม?

ได้ คั่นแต่ละเงาด้วยเครื่องหมายจุลภาค (,) เช่น box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);

03 Inset Shadow คืออะไร?

เงาด้านในของ element ทำให้ดูเหมือนกดลงไป นิยมใช้กับ Input Field ที่กำลัง Focus

04 Box Shadow มีผลต่อ Performance ไหม?

Box Shadow มีผลต่อ Rendering Performance เล็กน้อย โดยเฉพาะ blur-radius สูง ควรหลีกเลี่ยงใช้กับ element ที่มี Animation ซ้ำๆ

05 ข้อมูลถูกส่งไปเซิร์ฟเวอร์หรือไม่?

ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไป

06 box-shadow กับ drop-shadow filter ต่างกันอย่างไร?

box-shadow ใส่เงาตามรูปทรง Box ของ Element ส่วน CSS filter: drop-shadow() ตามเส้นขอบจริงรวมส่วนโปร่งใส เหมาะกับรูป PNG

07 ทำ Animation กับ box-shadow ให้ลื่นได้อย่างไร?

ได้ แต่ Animation box-shadow โดยตรงค่อนข้างหนัก ควรใช้ Pseudo-element ที่มีเงาแล้ว Animate Opacity แทนจะลื่นกว่า

08 สร้างเงาด้านเดียวของ Element ทำอย่างไร?

ตั้ง spread-radius เป็นค่าลบเท่ากับ blur-radius แล้วใช้ offset-x หรือ offset-y ดันเงาไปด้านที่ต้องการ

อ้างอิง

  1. MDN Web Docs — box-shadow (developer.mozilla.org)
  2. CSS-Tricks — box-shadow (css-tricks.com)
  3. Shadows Into Light — Material Design Shadow Guidelines (material.io)

เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่มีการส่งข้อมูลไปเซิร์ฟเวอร์ CSS code ที่สร้างได้รองรับทุกเบราว์เซอร์สมัยใหม่

ออกแบบ

เครื่องมือที่เกี่ยวข้อง

เครื่องมือคำนวณฟรีอื่น ๆ ที่คุณอาจสนใจ

ดูทั้งหมดในหมวดนี้

ต้องการเครื่องมือคำนวณสำหรับธุรกิจของคุณ?

ReSuMeYaDev รับพัฒนาเว็บไซต์ เครื่องมือคำนวณ และระบบภายในตามความต้องการ — Laravel, Vue, Nuxt, Go, Rust

ดูบริการของเรา