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

สร้างค่า CSS box-shadow ด้วยเครื่องมือสร้างเงาแบบแสดงตัวอย่างสด

⌘ ทำงานในเบราว์เซอร์ ◴ ไม่จัดเก็บข้อมูล ⌁ ฟรี

คำอธิบายแนวคิด

CSS box-shadow สำหรับใช้กับการ์ด ปุ่ม และโมดัลได้ทันที

ผสม offset-x, offset-y, blur, spread, color และ inset เพื่อปรับความลึกและขอบของคอมโพเนนต์ได้อย่างรวดเร็ว

box-shadow ช่วยกำหนดความลึกและการแยกเลเยอร์ของ UI ด้วยการตั้งค่า offset, blur, spread, color และ inset อย่างชัดเจน

เครื่องมือนี้ช่วยสร้างค่า CSS shadow แล้วตรวจสอบความคมชัดและความอ่านง่ายในโหมดมืด/สว่างก่อนนำไปใส่ในการ์ด ปุ่ม และโมดัลจริง

เหมาะเมื่อคุณต้องสร้างลำดับชั้นภาพใน card hover, เน้นปุ่ม, overlay ของ modal, หรือ toast ข้อความแจ้งเตือน

x/y offset กำหนดทิศทาง, blur กำหนดความนุ่ม, spread กำหนดความกว้าง, color กำหนดโทน, inset กำหนดลักษณะภายใน

ตรวจสอบการจับคู่กับโทนแบรนด์ของหน้า, โหมดมืด, ความคมชัดตัวอักษรบนปุ่ม และความสอดคล้องกับ token ระบบดีไซน์ เช่น radius, spacing, shadow tone

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

จำนวนชั้นเงา ประเภท

CSS box-shadow ที่สร้างแล้ว

ปรับค่าเงาอะไรได้บ้าง?

คุณปรับออฟเซ็ต X/Y, blur, spread, สี, ความทึบ และเงาด้านในได้ รวมถึงเพิ่มหรือลบชั้นเงาหลายชั้น

ใช้ CSS box-shadow ที่สร้างได้ทันทีหรือไม่?

ได้ CSS box-shadow ที่เสร็จแล้วจะแสดงใต้ตัวอย่าง และปุ่มคัดลอกจะคัดลอกไปยังคลิปบอร์ด

ตัวอย่างอัปเดตเมื่อเปลี่ยนค่าหรือไม่?

เมื่อปรับสไลเดอร์หรือค่าสี กล่องตัวอย่างและผลลัพธ์ CSS จะอัปเดตทันที