เครื่องมือสร้าง CSS Box Shadow
สร้างโค้ด CSS box-shadow แบบเห็นภาพ: ตัวเลื่อนสำหรับระยะเยื้อง ความเบลอ การกระจาย สีพร้อมความโปร่งใส โหมด inset และซ้อนชั้นได้สูงสุด 4 ชั้น พร้อมดูตัวอย่างสด
🔒 ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดสิ่งใดที่คุณป้อนที่นี่
ผลลัพธ์
ประกาศ box-shadow มีส่วนเคลื่อนไหวหกอย่าง — ระยะเยื้อง X และ Y ความเบลอ การกระจาย สี และคีย์เวิร์ด inset ที่เลือกใช้ได้ — และวิธีเดียวที่จะทำให้ถูกต้องคือการมองเห็นมัน เจนเนอเรเตอร์นี้ใส่ทุกส่วนไว้บนตัวเลื่อนและแสดงผลบนการ์ดตัวอย่างขณะที่คุณลาก ดังนั้นบรรทัด CSS ด้านล่างจึงเป็นสิ่งที่คุณกำลังมองเห็นอยู่เสมอ
เงาในโลกจริงแทบจะไม่ใช่ชั้นเดียว รายการชั้นช่วยให้คุณซ้อนเงาได้สูงสุดสี่ชั้นในประกาศเดียว: เส้นมืดคมเพื่อความคมชัดของขอบพร้อมกับแสงกระจายกว้างเพื่อยกเงา หรือคู่สว่าง-มืดที่เป็นนิยามของ neumorphism เลือกชั้นเพื่อแก้ไข ลบชั้นที่คุณไม่ต้องการ แล้วค่า box-shadow รวมจะอัปเดตสด
เงาอ่านต่างกันมากบนอินเทอร์เฟซสีมืด ซึ่งเงาดำบนหน้าเกือบดำก็จะหายไปเลย ปุ่มสลับพื้นหลังตัวอย่างสลับฉากหลังระหว่างสว่างและมืด คุณจึงตรวจสอบได้ทั้งสองธีมก่อนนำไปใช้ หน้าเพจที่ตั้งค่าล่วงหน้าครอบคลุมรูปแบบที่ผู้คนค้นหาจริง: เงายกระดับแบบ soft, ช่องแบบ inset, สูตร neumorphism สองชั้น และเงาการ์ดแบบเบาบาง
เช่นเดียวกับทุกเครื่องมือบนไซต์นี้ เจนเนอเรเตอร์นี้ฟรีและทำงานทั้งหมดในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลด ไม่มีบัญชี และยังทำงานแบบออฟไลน์ได้เมื่อโหลดหน้าแล้ว