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

เครื่องมือนี้ทำอะไร

เครื่องมือสร้าง box shadow ช่วยให้คุณออกแบบเงา CSS ด้วยสายตาแล้วคัดลอกการประกาศ box-shadow ที่เสร็จแล้วไปใช้ ซ้อนเงาได้หลายชั้นตามต้องการ ตั้งระยะเลื่อน ความเบลอ การขยาย สี และความทึบของแต่ละชั้น เปลี่ยนเป็นเงาด้านใน แล้วตัวอย่างจะอัปเดตทันที คุณยังวางค่า box-shadow ที่มีอยู่เพื่อแก้ไขแบบภาพได้ด้วย ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

วิธีใช้

1. เริ่มจากพรีเซ็ตหรือใช้เงาตัวอย่าง
2. เลือกชั้นด้วยปุ่ม ชั้น หรือกด + เพิ่มชั้น เพื่อซ้อนอีกชั้นไว้ด้านบน
3. ลาก ระยะเลื่อนแนวนอน ระยะเลื่อนแนวตั้ง ความเบลอ และ การขยาย เลือก สี แล้วลด ความทึบ ให้นุ่มขึ้น เปิด เงาด้านใน เพื่อให้เงาอยู่ด้านใน
4. ปรับ สีกล่อง พื้นหลัง และ รัศมีมุม ของตัวอย่างให้เข้ากับหน้าเว็บของคุณ ค่าเหล่านี้มีผลกับตัวอย่างเท่านั้น
5. คัดลอกโค้ดจากการ์ด CSS

ช่อง CSS เงา ด้านล่างแก้ไขได้: วางเงาจาก stylesheet หรือเครื่องมือออกแบบ แล้วตัวควบคุมจะอ่านค่าให้ ความยาวหน่วย rem หรือ em จะแปลงเป็น px โดยคิด 16px

ตัวอย่าง

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

เคล็ดลับเงาที่ดูเป็นธรรมชาติ

• ความทึบต่ำ สีดำ 5–25% ดูสมจริง เงาเข้มทึบดูหนัก
• การขยายติดลบ ช่วยไม่ให้เงาเบลอขนาดใหญ่ล้นออกด้านข้าง เป็นเทคนิคของเงาแบบ “การ์ด” ส่วนใหญ่
• ใส่สีให้เงา เงาที่มีโทนสีพื้นหลังหรือสีแบรนด์เล็กน้อยดูมีมิติกว่าสีเทาล้วน
• แสงมาจากทิศเดียว ให้ระยะเลื่อนแนวตั้งเป็นบวกทุกชั้น เงาทั้งหมดจะสอดคล้องกันเรื่องทิศทางแสง
• ประสิทธิภาพ เงาเบลอขนาดใหญ่บนองค์ประกอบจำนวนมากอาจทำให้การเลื่อนหน้าช้าบนมือถือสเปกต่ำ ให้ทำแอนิเมชันกับ opacity หรือ transform แทนตัวเงา