Box Shadow Generator
Generate CSS box shadows
เงา 1
แนวนอน4px
แนวตั้ง4px
เบลอ16px
ขยาย0px
สี
เอาต์พุต CSS
box-shadow: 4px 4px 16px 0px #00000033;
เกี่ยวกับเครื่องมือนี้
แนวนอน — ค่าบวกเลื่อนเงาไปทางขวา ค่าลบไปทางซ้าย แนวตั้ง — ค่าบวกเลื่อนลง ค่าลบเลื่อนขึ้น เบลอ — ค่ายิ่งมากเงายิ่งนุ่มนวล ขยาย — ค่าบวกขยายเงา ค่าลบหดเงา
เปิดใช้ภายในเพื่อสร้างเงาด้านใน เพิ่มหลายเงาด้วย "+ เพิ่มเงา" — แต่ละเงาคั่นด้วยจุลภาคใน CSS เรียงซ้อนจากหน้าไปหลัง
วิธีใช้งาน
- ปรับแถบเลื่อนแนวนอนและแนวตั้งเพื่อกำหนดระยะห่างของเงา
- เพิ่มเบลอเพื่อเงานุ่มนวล หรือตั้งเป็น 0 เพื่อเงาคมชัด
- ใช้ขยายเพื่อเพิ่มหรือลดขนาดเงาเกินขอบขององค์ประกอบ
- คลิก "+ เพิ่มเงา" เพื่อซ้อนหลายเงาสร้างเอฟเฟกต์ที่สมบูรณ์ยิ่งขึ้น
กรณีการใช้งาน
นักออกแบบใช้ box-shadow เพื่อสร้างความลึกและระดับชั้นในคอมโพเนนต์การ์ด เงาภายในสร้างเอฟเฟกต์ปุ่มถูกกด เงาหลายชั้นสร้างแสงสมจริงด้วยแสงแวดล้อมและแสงหลัก
คำถามที่พบบ่อย
- ตัวเลือก inset คืออะไร? — เงา inset ปรากฏภายในขอบขององค์ประกอบแทนที่จะอยู่ภายนอก เหมาะสำหรับสร้างเอฟเฟกต์กดบนช่องป้อนข้อมูลและปุ่ม
- เพิ่มหลายเงาได้ไหม? — ได้ คลิก "+ เพิ่มเงา" เพื่อเพิ่มชั้นเงา เงาทั้งหมดรวมเป็นการประกาศ box-shadow เดียวคั่นด้วยจุลภาค
- ค่าขยายติดลบทำอะไร? — การขยายติดลบทำให้เงาเล็กกว่าองค์ประกอบ เมื่อรวมกับระยะห่างและเบลอ สร้างเงาละเอียดที่โผล่เพียงด้านเดียว