CSS Box Shadow Generator
สร้าง CSS Box Shadow สวยๆ แค่เลื่อน Slider แล้ว Copy โค้ดไปใช้ได้เลย
Shadow Settings
CSS Code
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
คำถามที่พบบ่อย (FAQ)
Q: CSS Box Shadow คืออะไร?
CSS Box Shadow คือ Property ในภาษา CSS ที่ใช้สำหรับใส่เอฟเฟกต์แรเงาให้กับกล่ององค์ประกอบ (Element) บนหน้าเว็บ ทำให้หน้าเว็บดูมีมิติ มีความลึก แยก Layer รูปร่างชัดเจนขึ้น และมีสไตล์ที่สมจริงยิ่งขึ้นตามหลัก Material/Modern UI Design
Q: พารามิเตอร์ของ Box Shadow มีอะไรบ้าง?
Box Shadow ประกอบด้วยค่าย่อยๆ 5 อย่างหลักๆ เรียงตามลำดับคือ:
1. Horizontal Offset (แกน X - แนวนอน)
2. Vertical Offset (แกน Y - แนวตั้ง)
3. Blur Radius (ความลางเบลอของเงา)
4. Spread Radius (การกระจายตัวขยายขนาดของเงา)
5. Color (สีและความโปร่งใสของเงา)
Q: เงาแบบ Inset คืออะไร ต่างจากแบบ Outset อย่างไร?
ปกติแล้วถ้าเราไม่ได้ระบุคำว่า inset ระบบ CSS จะทำเงาเป็น Outset อัตโนมัติ (กระจายเงาออกไปด้านนอกองค์ประกอบ) แต่เงาแบบ Inset คือการทำให้แรเงาตกลงมาอยู่ 'ด้านใน' ของขอบกล่อง สร้างเอฟเฟกต์เหมือนกล่องหน้าจอนั้นถูกเจาะยุบลึกลงไปในพื้นผิวนั่นเองครับ