ออกแบบ

เครื่องมือสร้าง CSS Box Shadow

ออกแบบเงากล่องแบบเห็นภาพ

วิธีใช้

เริ่มจากพรีเซ็ตหรือเลเยอร์เดียว เพิ่มเลเยอร์เพื่อความลึก สลับ inset สำหรับเอฟเฟกต์นูน/กด คัดลอกค่าเป็น box-shadow

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

ซ้อนเงาหลายชั้นได้ไหม?

ได้ — เพิ่มเลเยอร์เพื่อรวมเงาบรรยากาศแบบนุ่มกับเงาสัมผัสที่กระชับ หรือซ้อนแสงเรืองสี แต่ละเลเยอร์มีค่า offset, blur, spread, สี และสวิตช์ inset ของตัวเอง

พรีเซ็ตทำอะไรบ้าง?

จุดเริ่มต้นแบบคลิกเดียว: มิติการยกของการ์ดสไตล์ Stripe, neumorphism แบบนูน/กด, ความลึกแบบ Material และแสงเรืองนุ่ม — ปรับแถบเลื่อนต่อได้หลังใช้งาน

ใช้ผลลัพธ์อย่างไร?

คัดลอกบรรทัด box-shadow ไปไว้ใน CSS หลายเลเยอร์จะคั่นด้วยจุลภาคตามรูปแบบที่เบราว์เซอร์ต้องการ

อัปเดตล่าสุด: