เครื่องมือสร้างเงาของกล่อง
สร้างเงา CSS box ด้วยตัวแก้ไขแบบภาพ ปรับแต่งออฟเซ็ต เบลอ การกระจาย สี และความทึบ เครื่องมือสร้างเงาฟรีพร้อมตัวอย่างสด
Loading tool...
เครื่องมือสร้างเงาของกล่อง คืออะไร?
CSS box shadow generator สร้างเอฟเฟกต์เงาสำหรับองค์ประกอบเว็บผ่านอินเทอร์เฟซแบบภาพ ปรับ horizontal/vertical offset, blur, spread และสีเพื่อสร้าง CSS code ที่เพิ่มความลึกและมิติให้ส่วนประกอบ UI
ประโยชน์หลัก
- ออกแบบเงาแบบภาพ
- หลายชั้นเงา
- รองรับเงาภายใน
- ดูตัวอย่างเรียลไทม์
กรณีการใช้งาน
- •ออกแบบการ์ด
- •เอฟเฟกต์ปุ่ม
- •modal dialogs
- •สไตล์รูปภาพ
วิธีสร้าง Box Shadows
- ตั้ง shadow offset: ปรับ horizontal และ vertical offset ด้วย sliders
- ตั้งค่า blur และ spread: ตั้ง blur radius และ spread เพื่อควบคุมความนุ่มของเงา
- เลือกสี: เลือกสีเงาและปรับ opacity สำหรับเอฟเฟกต์ที่ละเอียดอ่อน
- คัดลอก CSS code: คัดลอก box-shadow CSS property ที่สร้างขึ้นเพื่อใช้ใน styles ของคุณ
คุณสมบัติหลัก
- ตัวแก้ไขเงาแบบภาพพร้อม sliders
- รองรับหลายชั้นเงา
- รองรับ inset shadow
- เลือกสีพร้อมความโปร่งใส
- ดูตัวอย่างสด
- คัดลอก CSS box-shadow
คำถามที่พบบ่อย
CSS box shadows ทำงานอย่างไร?
Box-shadow เพิ่มเอฟเฟกต์เงาให้องค์ประกอบโดยใช้ค่า: horizontal offset, vertical offset, blur radius, spread radius และสี สามารถรวมหลายเงาได้
ความแตกต่างระหว่าง blur และ spread คืออะไร?
Blur สร้างขอบเงาที่นุ่มและค่อยเป็นค่อยไป Spread ขยายหรือหดขนาดเงา รวมทั้งสองสำหรับเอฟเฟกต์เงาที่สมจริง
สร้างเงาภายในได้ไหม?
ได้ ใช้คีย์เวิร์ด "inset" เพื่อสร้างเงาภายในองค์ประกอบ เงาภายในสร้างความลึกและเอฟเฟกต์ที่ดูบุ๋ม
วางหลายเงาซ้อนกันได้อย่างไร?
แยกหลายเงาด้วยคอมม่า เงาแรกปรากฏด้านบน วางเงาที่ละเอียดอ่อนสำหรับเอฟเฟกต์แสงที่นุ่มและสมจริง
อยู่ในชุดเครื่องมือ:ชุดเครื่องมือสำหรับนักออกแบบ UI/UX