เครื่องมือสร้าง CSS box-shadow
สร้างเงา (box-shadow) ขั้นสูงด้วย UI ที่ใช้งานง่าย
เครื่องมือฟรีที่รองรับการทำเงาหลายชั้น (multi-layer) ตามเทรนด์การออกแบบล่าสุด
รายการเลเยอร์เงา
ปรับพารามิเตอร์เงา
แสดงตัวอย่าง
เกี่ยวกับ
เครื่องมือสร้าง CSS box-shadow เป็นเครื่องมือสร้างเอฟเฟกต์เงาแบบอินเทอร์แอกทีฟ ที่ช่วยให้คุณปรับแต่งคุณสมบัติ box-shadow ผ่านอินเทอร์เฟซแบบลากและวางที่ใช้งานง่าย
คุณไม่เพียงสามารถสร้างเงาง่ายๆ ได้เท่านั้น แต่ยังสามารถซ้อนเงาหลายชั้นเพื่อสร้างเทรนด์การออกแบบสุดล้ำ เช่น Neumorphism (ความนูน 3 มิติ), Neo Brutalism (แข็งแกร่งและแบนราบ) หรือ Glassmorphism (เอฟเฟกต์กระจก) เพียงแค่เลือกจากเทมเพลตที่มีให้
หลังจากปรับแต่งเสร็จสิ้น เครื่องมือจะสร้างโค้ด CSS แบบมาตรฐาน, CSS variables หรือคลาส Tailwind CSS (รองรับ arbitrary values) ให้คุณคัดลอกไปใช้งานได้ทันที
วิธีใช้งาน
ดูเทมเพลตด้านบน หากเห็นว่าใกล้เคียงกับไอเดียของคุณ ให้คลิกเลือกเพื่อประหยัดเวลา แน่นอนว่าคุณสามารถเริ่มสร้างใหม่ตั้งแต่ต้นด้วยปุ่ม "เพิ่มเลเยอร์"
เลื่อนแถบแกน X/Y เพื่อกำหนดตำแหน่ง, ปรับความเบลอ (blur), การกระจาย (spread) และเพิ่มสีสัน เคล็ดลับ: ซ้อนเงา 2-3 ชั้นจะดู "สมจริง" และมีความลึกมากขึ้น
เมื่อกล่องในหน้าจอตัวอย่างดูสวยงามตามที่คุณต้องการแล้ว ให้ดูที่แผงโค้ดด้านขวาล่าง เลือกประเภทโค้ดที่คุณชื่นชอบ (CSS หรือ Tailwind) แล้วกดปุ่มคัดลอก
คุณสมบัติ
ไวยากรณ์และคุณสมบัติของ box-shadow
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
- offset-x / offset-y
- กำหนดทิศทางของเงา ค่าบวกจะผลักเงาไปทางขวา/ลงล่าง ค่าลบจะดึงเงาไปทางซ้าย/ขึ้นบน
- blur-radius (ความเบลอ)
- ยิ่งเงาเบลอมากเท่าไหร่ก็ยิ่งดูนุ่มนวลและกระจายวงกว้าง หากตั้งค่าเป็น 0 เงาจะมีความคมชัดในสไตล์ Neo Brutalism
- spread-radius (การกระจาย)
- ขยายหรือย่อขนาดของเงา ค่าบวกจะทำให้เงาใหญ่กว่าวัตถุจริง ค่าลบจะย่อเงาให้เล็กลงอยู่ข้างใต้
- inset (เงาด้านใน)
- หากใส่คีย์เวิร์ดนี้ เงาจะกลับเข้าไปอยู่ข้างในส่วนประกอบ สร้างความรู้สึกที่แท็ก HTML ยุบตัวลงจากพื้นผิว
คำถามที่พบบ่อย
Q. การใช้ box-shadow ทำให้เว็บช้าลงหรือไม่?
Q. box-shadow ต่างจาก filter: drop-shadow อย่างไร?
Q. คุณสมบัติ inset มักจะใช้ตอนไหน?
Q. ทำไมถึงต้องซ้อนเงาหลายชั้น?
การใช้งาน
อินเทอร์เฟซการ์ด (Card) และ Modal
แยกเนื้อหาให้โดดเด่นจากพื้นหลัง เพื่อให้ผู้ใช้รับรู้ได้ทันทีว่านี่คือส่วนประกอบที่สำคัญ
สถานะการชี้หรือคลิกปุ่ม
ขยายเงาเมื่อวางเมาส์ แล้วเปลี่ยนเป็นเงาด้านใน (`inset`) เมื่อคลิก สร้างความรู้สึกเหมือนปุ่มถูกกดจริงๆ
สไตล์ Neumorphism
ซ้อนเงาสีขาวในแนวทแยงมุมเข้ากับเงาสีดำเบาๆ บนพื้นผิวที่มีสีพื้นหลังเดียวกัน คุณจะสร้างบล็อก 3 มิติที่ดูหรูหราได้
เอฟเฟกต์เรืองแสง (Glow)
ตั้งค่าแกน X และแกน Y เป็น 0 แล้วเพิ่มค่า spread พร้อมสีสันที่สดใส กล่องของคุณจะดูเหมือนกำลังเรืองแสงสว่างไสว
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง