ตัวสร้าง CSS Box Shadow
ออกแบบเงาหลายชั้นและรับโค้ด CSS พร้อมใช้
ตัวควบคุมเงา
ตัวอย่างสด
ผลลัพธ์ CSS
ตัวอย่างการใช้งาน
เงาการ์ดเบาบาง
เงาเบาบางที่เหมาะสำหรับการ์ดและคอนเทนเนอร์เนื้อหา
เงาหลายชั้น
รวมหลายชั้นเงาเพื่อเอฟเฟกต์ความลึกที่หลากหลาย
เงาด้านใน
สร้างเงาด้านในสำหรับเอฟเฟกต์องค์ประกอบที่กดหรือยุบ
คุณสมบัติ
หลายชั้นเงา
เพิ่มและกำหนดค่าหลายชั้นเงาเพื่อสร้างเอฟเฟกต์เงาที่ซับซ้อนและสมจริง
ตัวอย่างภาพสด
ดูเอฟเฟกต์เงาอัปเดตแบบเรียลไทม์ขณะปรับออฟเซ็ต เบลอ กระจาย และสี
ตัวเลือกสีและรูปแบบสำเร็จรูป
เลือกสีที่กำหนดเองด้วยตัวเลือกแบบเนทีฟและใช้เงาสำเร็จรูปสำหรับการออกแบบรวดเร็ว
ความเป็นส่วนตัวมาก่อน
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
วิธีใช้?
กำหนดค่าเงา
ปรับออฟเซ็ต X/Y เบลอ กระจาย และสีสำหรับแต่ละชั้นเงา สลับ inset สำหรับเงาด้านใน
เพิ่มชั้นเพิ่มเติม
คลิกเพิ่มชั้นเพื่อสร้างชั้นเงาเพิ่มเติมสำหรับเอฟเฟกต์ที่ซับซ้อนมากขึ้น
คัดลอก CSS
คลิกปุ่มคัดลอก CSS เพื่อคัดลอกโค้ด box-shadow ที่สร้างขึ้นไปยังคลิปบอร์ด
คำถามที่พบบ่อย
ตัวสร้าง Box Shadow คืออะไร?
ตัวสร้าง box shadow เป็นเครื่องมือแบบภาพที่ช่วยให้คุณออกแบบเอฟเฟกต์ CSS box-shadow โดยไม่ต้องเขียนโค้ดเอง ปรับตัวเลื่อนสำหรับออฟเซ็ต X/Y เบลอ กระจาย และสี แล้ว CSS จะอัปเดตแบบเรียลไทม์ ทดลองจนพอใจแล้วก็คัดลอกโค้ดไปใช้ได้เลย
คุณสมบัติหลัก
ตัวสร้างนี้รองรับหลายชั้นเงาเพื่อให้คุณรวมเงาอ่อนและเงาแข็งสร้างความลึก แต่ละชั้นมีตัวเลือกสีและปุ่ม inset ของตัวเอง มีค่าสำเร็จรูปสำหรับสไตล์ทั่วไปเช่น การ์ดบาง องค์ประกอบลอย และเอฟเฟกต์ความลึกหลายชั้น
กรณีใช้งานทั่วไป
คอมโพเนนต์การ์ดและ Modal มักต้องการการยกตัวเล็กน้อย ปุ่มได้ประโยชน์จากเงาเบาๆ ตอน Hover เงา inset เหมาะสำหรับช่องป้อนข้อมูลหรือปุ่มสถานะกด เงาหลายชั้นให้ส่วน Hero ดูพรีเมียม
เคล็ดลับสำหรับเงาที่ดีขึ้น
ให้ค่าเบลอสูงกว่าค่ากระจายเพื่อรูปลักษณ์ที่เป็นธรรมชาติ ใช้สีดำกึ่งโปร่งใส (เช่น rgba(0,0,0,0.1)) แทนสีทึบ ซ้อนเงาสองถึงสามชั้นด้วยออฟเซ็ตต่างกันเพื่อแสงที่สมจริง
ความเป็นส่วนตัว
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีข้อมูลเงา ไม่มีการตั้งค่า ไม่มีอะไรออกจากเครื่องของคุณ