สร้างเงาเงา

ได้ คุณสามารถเพิ่มหลายเงาเพื่อสร้างเอฟเฟกต์ความลึกที่ซับซ้อน แต่ละเงาปรับแต่งแยกกันได้

เงา inset ปรากฏภายในองค์ประกอบแทนที่จะภายนอก ในขณะที่ box-shadow ปกติปรากฏภายนอก inset สร้างเอฟเฟกต์กดลงไป

เงาในความเป็นจริงไม่ใช่สีดำ แต่ใกล้เคียงกับสีพื้นหลังที่มืดลง และจะนุ่มลงเรื่อย ๆ เมื่อออกไปทางขอบ แทนที่จะใส่เงาดำ 30% หนัก ๆ ชั้นเดียว ให้ซ้อนเงาจาง ๆ สองถึงสามชั้นด้วยรัศมีเบลอต่างกัน เช่น ชั้น 1 พิกเซลชิดขอบ ชั้น 8 พิกเซลถัดออกมา และชั้น 24 พิกเซลที่จางมากอยู่นอกสุด ให้สมมติว่าแสงมาจากด้านบน จึงกำหนดเฉพาะการเลื่อนแนวตั้ง และปล่อยการเลื่อนแนวนอนไว้ที่ศูนย์

ในสภาพนิ่ง ๆ แทบไม่มีผลเลย แต่จะต่างออกไปทันทีเมื่อใส่แอนิเมชัน การทำทรานซิชันค่า box-shadow ตอนเอาเมาส์ไปวาง บังคับให้เบราว์เซอร์คำนวณความเบลอใหม่ทุกเฟรม ซึ่งจะกระตุกให้เห็นชัดบนอุปกรณ์สเปกต่ำ หากต้องการให้เงาขยายตอนมีปฏิสัมพันธ์ ให้เปลี่ยนไปทำแอนิเมชันที่ค่า opacity หรือ transform ของชั้นเงาที่วาดไว้ล่วงหน้าแทน ผลลัพธ์จะลื่นกว่ามาก