เครื่องกำเนิดเงากล่อง
ออกแบบกล่องเงาแบบเลเยอร์พร้อมออฟเซ็ต เบลอ กระจาย และสี ดูตัวอย่างบนการ์ด จากนั้นคัดลอก CSS ได้ในคลิกเดียว
Box Shadow Generator
LivePreview card
CSS output
box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35); border-radius: 24px;
Key capabilities
- ออกแบบกล่องเงาแบบเลเยอร์พร้อมออฟเซ็ต การเบลอ การแพร่กระจาย และสี — รวมการแสดงตัวอย่างแบบเรียลไทม์
- ทำงานในเบราว์เซอร์ของคุณ
- ใช้งานได้ฟรี
วิธีใช้
- ปรับออฟเซ็ต เบลอ และกระจาย
- เลือกสีและความทึบ (หรือเพิ่มเลเยอร์)
- คัดลอกกล่องเงา CSS
How this tool works
- ปรับออฟเซ็ต เบลอ และกระจาย
- เลือกสีและความทึบ (หรือเพิ่มเลเยอร์)
- คัดลอกกล่องเงา 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
เครื่องมือที่เกี่ยวข้อง
Text Shadow Generator
Craft readable text-shadow styles with live typography preview.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolCSS Gradient Generator
Build linear, radial, and conic gradients with live preview and copy-ready CSS.
Open tool