ตัวสร้างเงากล่อง (box-shadow) ให้คุณปรับเอฟเฟกต์เงาแบบเรียลไทม์ด้วยแถบเลื่อน รองรับเงาซ้อนหลายชั้น และมี 8 ค่าที่ตั้งไว้ที่คัดสรรแล้ว รวม Material, Neumorphism และ Neon — แล้วคัดลอก CSS ได้ทันที
คุณสมบัติ
- พารามิเตอร์ปรับได้ 5 ตัว: ออฟเซ็ต X (ซ้าย/ขวา) ออฟเซ็ต Y (บน/ล่าง) รัศมีเบลอ (ความนุ่มของขอบ) รัศมีกระจาย (ขนาดโดยรวม) และความทึบ — แต่ละตัวมีแถบเลื่อนของตัวเอง
- เงาหลายชั้น: คลิก “เพิ่มชั้นเงา” เพื่อซ้อนเงาหลายอัน — งานออกแบบจริงมักใช้ 2–3 ชั้นเพื่อความลึกที่เป็นธรรมชาติขึ้น (เช่นใน Material Design)
- เงาด้านใน (Inset): เปิด Inset เพื่อพลิกเงาเข้าไปด้านในองค์ประกอบ — เหมาะกับเอฟเฟกต์ปุ่มที่ถูกกดหรือการ์ดที่เว้าลง
- พื้นหลังตัวอย่าง 3 แบบ: สลับระหว่างพื้นหลังสว่าง มืด และกราเดียนต์เพื่อดูว่าเงาดูเป็นอย่างไรบนพื้นผิวต่างกัน
- 8 ค่าที่ตั้งไว้ที่คัดสรรแล้ว: Flat, Subtle, Card, Material (3 ชั้น), Dramatic, Neon Blue, Neumorphism และ Inset
- คัดลอก CSS ในคลิกเดียว: รับไวยากรณ์ครบถ้วน box-shadow: ...; พร้อมวางในไฟล์ CSS ใดก็ได้ prop style ของ Tailwind หรือเครื่องมือออกแบบ
วิธีใช้
- ใช้แถบเลื่อนปรับออฟเซ็ต ความเบลอ การกระจาย และความทึบ — ตัวอย่างอัปเดตทันที
- เพื่อให้ได้ความลึกที่เป็นธรรมชาติขึ้น ให้เพิ่มเลเยอร์เงาหรือเปิด Inset เพื่อทำเงาด้านใน
- คลิกคัดลอกแล้ววาง CSS ในโปรเจกต์ของคุณ
