Stax
Tools

CSS Box Shadow Generator

Generate CSS box-shadow visually with live preview.

Horizontal (X)4px
Vertical (Y)4px
Blur radius10px
Spread radius0px
Opacity25%
Color
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

วิธีการทำงานของเครื่องสร้าง CSS Box Shadow

เครื่องสร้าง CSS box shadow มีอินเทอร์เฟซแบบภาพสำหรับออกแบบค่า box-shadow โดยไม่ต้องจำ syntax ของ property ลาก slider สำหรับ horizontal offset, vertical offset, blur radius, spread radius และสี ตัวอย่างแบบ real-time อัปเดตทันที คัดลอก CSS declaration ที่เสร็จแล้ว (รวม vendor prefix หากจำเป็น) สำหรับใช้โดยตรงใน stylesheet หรือ design system token

CSS box-shadow syntax เต็มรูปแบบคือ: box-shadow: [inset] h-offset v-offset blur spread color h-offset บวกทำเงาไปทางขวา ลบไปทางซ้าย v-offset บวกทำเงาลงด้านล่าง ลบขึ้นด้านบน blur radius สร้างความนุ่มนวล 0 คือขอบแข็ง spread radius ขยายหรือหดเงาเกินขนาดของ element keyword inset ที่ไม่บังคับเลื่อนเงาเข้าไปข้างใน border ของ element สร้างเอฟเฟกต์แบบกดลงหรือยุบ

ระบบ Material Design ของ Google กำหนดระดับ elevation โดยใช้ box shadow แบบชั้น Elevation 1dp ใช้เงาที่บางมาก elevation 24dp (สำหรับ dialog) ใช้เงาหนักแบบหลายชั้น เครื่องสร้างมี preset ระดับ elevation ของ Material Design เพื่อให้คุณจับคู่ค่าเงามาตรฐานได้แม่นยำ ซึ่งสำคัญสำหรับการรักษาความสอดคล้องของภาพในระบบ design ที่ตาม Material guidelines แทนที่จะสร้างค่าเงาขึ้นมาเอง

Neumorphism (soft UI) สร้างพื้นผิวนูนหรือยุบโดยใช้ box shadow สองอัน หนึ่งสว่าง (บน-ซ้าย สีขาว opacity ต่ำ) และหนึ่งมืด (ล่าง-ขวา สีดำ opacity ต่ำ) บนสีพื้นหลังที่ตรงกัน CSS box-shadow รับค่าเงาหลายค่าที่คั่นด้วยเครื่องหมายจุลภาค ซึ่งใช้พร้อมกัน เครื่องสร้างรองรับสูงสุด 4 ชั้นเงาพร้อมกัน เปิดใช้งานเอฟเฟกต์ neumorphic, เส้นขอบ glow สี และการซ้อน elevation ที่ซับซ้อนในค่า property เดียว

CSS box shadow ถูก GPU composited ในเบราว์เซอร์สมัยใหม่เมื่อ element อยู่บน compositing layer ของตัวเอง (กระตุ้นด้วย transform, opacity หรือ will-change) อย่างไรก็ตาม การเพิ่ม box-shadow ให้กับ element ที่เปลี่ยนแปลงบ่อย (เช่น เมื่อ hover โดยไม่มี transition) หรือ element ภายใน scroll container อาจกระตุ้น layout และ paint ส่งผลต่อประสิทธิภาพ สำหรับเงาที่เคลื่อนไหวได้ลื่น ให้ animate opacity บน pseudo-element เงาแทน ผลลัพธ์ของเครื่องสร้างจะระบุว่าตรงไหนที่สามารถเพิ่ม transition: box-shadow ได้อย่างปลอดภัย

คำถามที่พบบ่อย

What are the box-shadow parameters?
box-shadow takes: horizontal offset (X), vertical offset (Y), blur radius, spread radius, and color. A negative X moves the shadow left; negative Y moves it up. Spread expands or contracts the shadow size.
What does 'inset' do?
The inset keyword moves the shadow to the inside of the element (inner shadow) instead of outside. This is useful for creating pressed-button effects or inner glows.
Can I add multiple box shadows?
Yes. Click '+ Add' to add another shadow layer. CSS supports comma-separated multiple shadows, with the first shadow drawn on top. Each shadow has its own independent settings.
How do I use the generated CSS?
Click 'Copy' and paste the box-shadow property into your CSS file or style attribute. The output is valid CSS3 that works in all modern browsers.

เครื่องมือที่เกี่ยวข้อง