ตัวสร้าง CSS Box Shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี
ตัวสร้าง CSS Box Shadow คืออะไร?
เครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับค่า offset, blur, spread, สี และ inset พร้อมแสดงตัวอย่างเงาแบบเรียลไทม์ และสร้างโค้ด CSS box-shadow พร้อมคัดลอก
วิธีใช้งาน
- 1 เลือกพรีเซ็ต — เริ่มต้นอย่างรวดเร็วด้วยปุ่มพรีเซ็ต
- 2 ปรับแถบเลื่อน — ปรับเงาโดยใช้แถบเลื่อน X/Y offset, blur และ spread
- 3 ดูตัวอย่าง — ตรวจสอบผลลัพธ์แบบเรียลไทม์ในตัวอย่างด้านบน
- 4 คัดลอก CSS — ใช้ปุ่มคัดลอกเพื่อรับ CSS box-shadow
เครื่องมือที่เกี่ยวข้อง
ตัวสร้าง CSS Gradient เครื่องมือสร้าง CSS gradient แบบภาพออนไลน์ฟรี ออกแบบ gradient แบบ linear, radial และ conic เพิ่มจุดหยุดสี ปรับมุม แล้วคัดลอกโค้ด CSS พร้อมใช้สำหรับพื้นหลังเว็บไซต์
ตัวสร้าง CSS Border Radius เครื่องมือสร้าง CSS border-radius ออนไลน์ฟรี พร้อมจุดควบคุมมุมอิสระ 8 จุดและตัวเลื่อน แสดงตัวอย่างรูปทรงมุมโค้งแบบเรียลไทม์ และสร้างโค้ด CSS border-radius พร้อมคัดลอก
ตัวสร้าง CSS Flexbox สนามทดลอง CSS Flexbox ออนไลน์ฟรี พร้อมตัวแก้ไขแบบภาพสำหรับ justify-content, align-items, flex-direction และ wrap แสดงตัวอย่างเลย์เอาต์แบบเรียลไทม์ และสร้าง Flexbox CSS พร้อมคัดลอก
คำถามที่พบบ่อย
ได้ ใช้ปุ่ม 'เพิ่มเงา' เพื่อซ้อนเงาหลายตัว
รองรับ เปิดใช้งานกล่องกาเครื่องหมาย Inset บนเงาแต่ละตัวเพื่อสร้างเงาด้านใน
มี 5 พรีเซ็ต: Subtle, Medium, Large, Inset และ Double
ได้ คุณสามารถป้อน rgba(0,0,0,0.15) โดยตรงในช่องป้อนสี
ไม่ การคำนวณทั้งหมดทำในเบราว์เซอร์