ตัวสร้าง Box Shadow

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้าง Box Shadow ช่วยสร้าง CSS box-shadow ด้วยแถบเลื่อนปรับ X และ Y offset, blur, spread, สี, ความทึบ และ inset พร้อมพรีเซ็ต Material Design และ Tailwind และให้โค้ด CSS ที่ตรงเป๊ะ

วิธีใช้

1. เริ่มจากพรีเซ็ต หรือใช้แบบ Custom
2. ปรับ X/Y offset, blur, spread และความทึบ
3. เลือกสีเงา และติ๊ก Inset หากต้องการเงาด้านใน
4. คลิก Copy CSS เพื่อนำกฎ box-shadow ไปวาง

ข้อควรรู้

• ไวยากรณ์ของ box-shadow คือ [inset] offset-x offset-y blur-radius spread-radius color
• ค่า blur radius ที่มากขึ้นทำให้ขอบเงานุ่มลง ส่วน spread ทำให้เงาขยายหรือหดก่อนการเบลอ
• เงาสีเข้มที่มีความทึบต่ำ (ประมาณ 10–25%) ดูเป็นธรรมชาติกว่าสีดำทึบ
• ซ้อนเงาหลายชั้นได้โดยคั่นแต่ละเงาด้วยเครื่องหมายจุลภาค
• คีย์เวิร์ด inset จะวาดเงาไว้ภายในเส้นขอบของ element

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

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