ตัวสร้าง CSS Box Shadow
สร้าง CSS box-shadow แบบหลายชั้นด้วยแถบเลื่อนแบบสดสำหรับ offset, blur, spread, สี, ความโปร่งใส และ inset — ดูตัวอย่างบนองค์ประกอบจริงและคัดลอก CSS พร้อมใช้งานทันที
box-shadow: —;
ทุกอย่างอัปเดตแบบสดในเบราว์เซอร์ — ไม่มีการอัปโหลด ไม่ต้องลงทะเบียน ฟรีทั้งหมด
เกี่ยวกับ ตัวสร้าง CSS Box Shadow
CSS Box Shadow Generator ให้คุณออกแบบเงาแบบ box-shadow ด้วยสายตาแทนการเดาค่าในโค้ด ลากแถบเลื่อนสำหรับระยะเลื่อนแนวนอนและแนวตั้ง รัศมีเบลอ รัศมีการกระจาย สี และความโปร่งใส พร้อมสวิตช์ inset แล้วดูอิลิเมนต์จริงอัปเดตแบบสด เมื่อได้ผลลัพธ์ที่ต้องการ ให้คัดลอก CSS ที่พร้อมวางได้ด้วยคลิกเดียว
เงาของ UI สมัยใหม่มักไม่ได้มีเพียงชั้นเดียว ตัวสร้างนี้รองรับการซ้อนเงาหลายชั้น เพิ่ม ทำสำเนา ซ่อน หรือลบชั้นได้ และดูตัวอย่างได้ทั้งชั้นที่เลือกอยู่ตัวเดียวหรือทุกชั้นรวมกัน การซ้อนเงาสีเข้มระยะใกล้ไว้ใต้เงาที่นุ่มและกว้างกว่าคือวิธีที่การ์ดและปุ่มที่ดูประณีตได้มิติความลึกมา
คุณยังปรับแต่งตัวอิลิเมนต์ตัวอย่างเองได้ด้วย เช่น สีของกล่อง รัศมีขอบมน และพื้นหลังของแคนวาส เพื่อให้เงาถูกตัดสินในบริบทที่สมจริง รวมถึงบนพื้นผิวสีเข้ม เริ่มจากพรีเซ็ต กด "Randomize layer" เพื่อหาแรงบันดาลใจ และรีเซ็ตได้เมื่อต้องการเริ่มใหม่ทั้งหมด ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
วิธีใช้ ตัวสร้าง CSS Box Shadow
- ปรับแถบเลื่อนสำหรับระยะเลื่อนแนวนอน แนวตั้ง เบลอ กระจาย สี และความโปร่งใส และเปิด "Inset shadow" หากต้องการเงาด้านใน
- คลิก "Add layer" หรือ "Duplicate layer" เพื่อซ้อนเงา และสลับโหมดตัวอย่างระหว่าง "This layer" กับ "All layers" เพื่อปรับแต่งแต่ละชั้น
- ปรับแต่งอิลิเมนต์และแคนวาส เช่น สีของกล่อง รัศมีขอบมน และพื้นหลัง เพื่อให้ตัวอย่างตรงกับดีไซน์จริงของคุณ
- ใช้พรีเซ็ตหรือ "Randomize layer" หากต้องการจุดเริ่มต้นแทนที่จะปรับแถบเลื่อนตั้งแต่ศูนย์
- คัดลอกกฎ CSS ทั้งหมด (หรือแค่ค่า) แล้ววางลงในสไตล์ชีตของคุณ