ตัวสร้าง CSS Box Shadow

เครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

พื้นหลัง

สีกล่อง

เงาตกกระทบ

Inset

ออฟเซต X: 4px

ออฟเซต Y: 4px

เบลอ: 10px

ระยะกระจาย: 0px

สี

ฝัง

<iframe src="https://devtools.patrache.studio/th/generators/css-box-shadow/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="ตัวสร้าง CSS Box Shadow — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/th/generators/css-box-shadow/">ตัวสร้าง CSS Box Shadow</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี

ตัวสร้าง CSS Box Shadow คืออะไร?

วิธีใช้งาน

1
เลือกพรีเซ็ต— เริ่มต้นอย่างรวดเร็วด้วยปุ่มพรีเซ็ต
2
ปรับแถบเลื่อน— ปรับเงาโดยใช้แถบเลื่อน X/Y offset, blur และ spread
3
ดูตัวอย่าง— ตรวจสอบผลลัพธ์แบบเรียลไทม์ในตัวอย่างด้านบน
4
คัดลอก CSS— ใช้ปุ่มคัดลอกเพื่อรับ CSS box-shadow

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

ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์

ตัวสร้าง CSS Border Radiusสร้าง CSS border-radius ด้วยจุดควบคุมมุมอิสระ 8 จุดและตัวเลื่อน ดูตัวอย่างมุมโค้งแบบเรียลไทม์ และคัดลอกโค้ด CSS ไปใช้ได้ทันที ใช้ฟรีในเบราว์เซอร์

ตัวสร้าง CSS Flexboxสนามทดลอง CSS Flexbox ปรับ justify-content, align-items, flex-direction และ wrap แบบภาพ ดูเลย์เอาต์เรียลไทม์ และคัดลอกโค้ด Flexbox ได้ทันที ใช้ฟรี

ตัวแปลงรหัสสีแปลงสีระหว่างรหัส HEX, RGB, HSL และ OKLCH ได้ทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG ของสองสีเพื่อตรวจการเข้าถึง ใช้ฟรีในเบราว์เซอร์

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

ได้ ใช้ปุ่ม 'เพิ่มเงา' เพื่อซ้อนเงาหลายตัว

รองรับ เปิดใช้งานกล่องกาเครื่องหมาย Inset บนเงาแต่ละตัวเพื่อสร้างเงาด้านใน

มี 5 พรีเซ็ต: Subtle, Medium, Large, Inset และ Double

ได้ คุณสามารถป้อน rgba(0,0,0,0.15) โดยตรงในช่องป้อนสี

ไม่ การคำนวณทั้งหมดทำในเบราว์เซอร์