เครื่องกำเนิดเงากล่อง

ออกแบบกล่องเงาแบบเลเยอร์พร้อมออฟเซ็ต เบลอ กระจาย และสี ดูตัวอย่างบนการ์ด จากนั้นคัดลอก CSS ได้ในคลิกเดียว

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • ออกแบบกล่องเงาแบบเลเยอร์พร้อมออฟเซ็ต การเบลอ การแพร่กระจาย และสี — รวมการแสดงตัวอย่างแบบเรียลไทม์
  • ทำงานในเบราว์เซอร์ของคุณ
  • ใช้งานได้ฟรี

วิธีใช้

  1. ปรับออฟเซ็ต เบลอ และกระจาย
  2. เลือกสีและความทึบ (หรือเพิ่มเลเยอร์)
  3. คัดลอกกล่องเงา CSS

How this tool works

  1. ปรับออฟเซ็ต เบลอ และกระจาย
  2. เลือกสีและความทึบ (หรือเพิ่มเลเยอร์)
  3. คัดลอกกล่องเงา CSS

Recommended settings

  • ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น

Supported formats

Text / on-page input

File size and limits

  • การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า

Privacy

ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ

Common use cases

  • ใช้ Box Shadow Generator ทุกครั้งที่คุณต้องการ: ออกแบบกล่องเงาแบบเลเยอร์พร้อมออฟเซ็ต เบลอ กระจาย และสี — รวมการแสดงตัวอย่างสดด้วย

Troubleshooting

การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

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

สิ่งนี้อัปโหลด CSS ของฉันหรือไม่

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ฉันจำเป็นต้องมีบัญชีหรือไม่?

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS

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