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

ลากแถบเลื่อนเพื่อสร้าง box-shadow ซ้อนเลเยอร์เพื่อเพิ่มมิติความลึก และคัดลอก CSS ที่เสร็จสมบูรณ์ได้ทันที

เลเยอร์เงา
เลเยอร์ 1
CSS
ปรับแถบเลื่อนเพื่อกำหนดรูปทรงของเงา

เงาทั้งหมดจะถูกเรนเดอร์ในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo

คำถามที่พบบ่อย

Offset, Blur และ Spread ควบคุมอะไรบ้าง?

Offset จะย้ายเงาไปทางซ้าย/ขวา และขึ้น/ลง, Blur จะช่วยให้ขอบเงานุ่มนวลขึ้น และ Spread จะขยายหรือย่อขนาดของเงาก่อนที่จะเบลอ การตั้งค่า Spread เป็นค่าลบจะดึงเงาให้แคบลง ซึ่งมีประโยชน์สำหรับการสร้างเงาที่คมและแนบชิดกับวัตถุ

ตัวเลือก Inset มีไว้ทำอะไร?

เงาปกติจะตกกระทบอยู่ภายนอกองค์ประกอบ เหมือนแสงที่อยู่หลังการ์ดที่ลอยขึ้นมา ส่วนตัวเลือก Inset จะกลับทิศทางของเงาให้เข้ามาอยู่ด้านในแทน ทำให้องค์ประกอบดูยุบลงไป ซึ่งมีประโยชน์มากสำหรับช่องกรอกข้อมูล (Input) หรือปุ่มที่ถูกกด

ทำไมต้องซ้อนเลเยอร์เงามากกว่าหนึ่งชั้น?

การใช้เงาเพียงเลเยอร์เดียวอาจทำให้ดูแบนเมื่อมีขนาดใหญ่ขึ้น ในความเป็นจริง มิติความลึกที่สมจริงมักเกิดจากการผสมผสานระหว่างเงาเข้มที่แคบและเงาจางที่กว้างกว่า การเพิ่มเลเยอร์ที่สองและปรับแต่งแต่ละเลเยอร์แยกกันจะช่วยให้ได้เอฟเฟกต์ที่ดูมีมิติยิ่งขึ้น