สร้าง CSS Box Shadow (พร้อมพรีวิวสด)
พรีเซ็ตเงาทั่วไป 6 แบบ (อ่อน การ์ด ยก เรืองแสง neumorphic inset) ปรับพารามิเตอร์ทั้งหมดด้วยสไลเดอร์ ดูผลแบบสด และคัดลอก CSS พร้อมวาง
วิธีการทำงาน
พารามิเตอร์เงา 5 ตัว
X offset: การเลื่อนแนวนอน บวกเลื่อนเงาไปขวา ลบเลื่อนซ้าย สำหรับแสงจากมุมซ้ายบน (สมมติฐาน UI ทั่วไป) X บวกเล็กๆ จำลองแสงจากมุมซ้ายบน
Y offset: การเลื่อนแนวตั้ง บวกเลื่อนเงาลง จำลองแหล่งแสงด้านบน เงา UI เกือบทั้งหมดใช้ Y บวก
Blur radius: ขอบของเงานุ่มแค่ไหน 0 = ขอบคม (หายาก) 8-30px เป็นปกติสำหรับการ์ดและปุ่ม ค่าสูงกว่าสร้างเงาฝันๆ นุ่มๆ
Spread: ขยายหรือหดเงาอย่างสม่ำเสมอ ค่าบวกทำให้เงาใหญ่กว่าองค์ประกอบ ลบหดเล็กลง spread ลบรวมกับ offset สร้างเอฟเฟกต์ 'ยก'
สี/ความโปร่งใส: เงามักเป็นสีดำที่ความโปร่งใสต่ำ (10-30%) เงาสีกำลังเป็นเทรนด์แต่ใช้ยาก ปรับให้เข้ากับช่วงค่าของพื้นหลังของคุณ — เงาเข้มเกินใน UI มืดหายไป เงาสว่างเกินใน UI สว่างขาดคอนทราสต์
Inset shadows
Inset shadow ถูกวาดในองค์ประกอบแทนภายนอก ใช้สำหรับ: สถานะปุ่มที่ถูกกด ฟิลด์อินพุตจม เอฟเฟกต์ neumorphic '3D กดเข้า'
Inset shadows เคารพ border radius ขององค์ประกอบและละเว้น overflow มีประโยชน์สำหรับเพิ่มความลึกทางสายตาให้องค์ประกอบ UI แบบแบนโดยไม่เปลี่ยนเลย์เอาต์จริง
Neumorphism และเทรนด์ 'soft UI'
Neumorphism (นิยม 2020-2022) ใช้เงาสองตัวที่ตรงข้ามกัน — หนึ่งสว่าง หนึ่งมืด — เพื่อให้องค์ประกอบดูยื่นออกจากพื้นหลังสีเดียวกัน พรีเซ็ต 'Neumorphic' ของเราแสดงเงามืดตัวเดียว สำหรับ neumorphism เต็ม รวมกับ inset shadow สว่างด้านตรงข้าม: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'
หมายเหตุ: neumorphism บริสุทธิ์มีปัญหาการเข้าถึง — การขาดคอนทราสต์ทำให้องค์ประกอบยากที่จะแยกแยะ การออกแบบสมัยใหม่ใช้อย่างประหยัด มักรวมกับเงาแบบดั้งเดิม
คำถามที่พบบ่อย
›เพิ่มเงาหลายตัวได้ไหม?
CSS รองรับเงาหลายตัวคั่นด้วยคอมมา: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)' เครื่องมือของเราสร้างเงาทีละตัว รวมหลายตัวด้วยมือ
›ทำเอฟเฟกต์ neumorphic อย่างไร?
รวมเงามืดที่ขวาล่างกับเงาสว่างที่ซ้ายบน ทั้งสอง inset หรือทั้งสองนอก ตัวอย่าง: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)' พรีเซ็ตของเราแสดงครึ่งมืด เพิ่มเงาสว่างด้วยตนเอง
›ความแตกต่างระหว่าง blur และ spread คืออะไร?
Blur ทำให้ขอบเงานุ่ม (ความโปร่งใสแบบไล่ระดับ) Spread เปลี่ยนขนาดรวมของเงา (มากกว่าหรือน้อยกว่าองค์ประกอบ) blur=20 spread=0 เป็นแสงเรืองนุ่มที่ขนาดองค์ประกอบ blur=0 spread=20 เป็นเงาแข็งใหญ่กว่า 20px
›ทำไมเงาของฉันดูแบน?
อาจมีความโปร่งใสต่ำเกิน ไม่มี offset หรือสีเงาใกล้พื้นหลังเกินไป ลอง Y=8, blur=24, opacity=0.18 เป็นจุดเริ่มต้น — ค่าเหล่านั้นแสดงผลที่มองเห็นได้บนพื้นหลังสว่างส่วนใหญ่
›ใช้สำหรับ text-shadow ได้ไหม?
เกือบ — text-shadow ใช้ syntax เดียวกันลบ 'spread' และ 'inset' ปรับด้วยตนเองหลังจากคัดลอก: เอา 'X Y blur color' (ทิ้ง spread และ inset)
›เงามีประสิทธิภาพหรือไม่?
Box-shadow ได้รับการเร่งความเร็วด้วย GPU ในเบราว์เซอร์สมัยใหม่ เงาหลายตัวบนหลายองค์ประกอบยังคงทำให้การเลื่อนช้าลงได้ เงาเดี่ยวบนการ์ดและปุ่ม: ไม่ต้องกังวล
›ใช้เงาหรือเส้นขอบ?
ทั้งคู่มีการใช้งาน เส้นขอบคมและเข้าถึงได้มากกว่า เงาดูนุ่มกว่า/ยกสูงกว่า UI สมัยใหม่ที่ค่อนข้างแบนมักใช้ทั้งคู่: เส้นขอบบางสำหรับความคมชัด + เงานุ่มสำหรับการยก
›ข้อมูลออกจากเบราว์เซอร์หรือไม่?
ไม่ การสร้างพรีวิวและ CSS ทั้งหมดทำงานในเครื่อง ไม่มีอะไรส่งไปยังเซิร์ฟเวอร์
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: