ตัวอย่าง
เลเยอร์เงา
โค้ด CSS
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
ชุดค่าตัวอย่าง
คุณสมบัติ
ค่าบวกเลื่อนเงาไปทางขวา ค่าลบเลื่อนไปทางซ้าย
ค่าบวกเลื่อนเงาลง ค่าลบเลื่อนขึ้น
ค่ายิ่งสูง เงายิ่งนุ่มและกระจายมากขึ้น
ค่าบวกขยายเงา ค่าลบทำให้เงาเล็กลง
สร้างเงาไว้ด้านในขององค์ประกอบ
เกี่ยวกับเครื่องมือสร้าง CSS Box Shadow
ออกแบบ CSS box-shadow ด้วยตัวสร้างแบบเห็นภาพ เพิ่มเงาหลายเลเยอร์ ปรับ offset, blur, spread และความทึบอย่างละเอียด แล้วคัดลอกโค้ด CSS ได้ในคลิกเดียว
คู่มือ CSS Box Shadows ฉบับสมบูรณ์
เครื่องมือสร้าง CSS Box Shadow ออนไลน์ฟรี
สร้างเงาด้านนอกและเงาด้านใน พร้อมควบคุม offset, blur radius, spread, สี และความทึบได้อย่างแม่นยำ เหมาะสำหรับเพิ่มมิติ elevation และเอฟเฟกต์เรืองแสงให้ UI
CSS Box Shadow คืออะไร?
CSS property box-shadow ใช้เพิ่มเอฟเฟกต์เงารอบกรอบขององค์ประกอบ เงาสามารถอยู่นอกองค์ประกอบหรืออยู่ด้านในแบบ inset และสามารถซ้อนหลายเงาเพื่อสร้างเอฟเฟกต์ที่ซับซ้อนได้ box-shadow
คุณสมบัติของ Box Shadow
Offset (X และ Y)
- offset แนวนอนเลื่อนเงาไปซ้ายหรือขวา
- offset แนวตั้งเลื่อนเงาขึ้นหรือลง
- ค่าบวกเลื่อนไปทางขวาหรือลง
- ค่าลบเลื่อนไปทางซ้ายหรือขึ้น
- ค่า 0 สร้างเงาที่อยู่กึ่งกลาง
Blur และ Spread
- Blur radius ทำให้ขอบเงานุ่มขึ้น
- ค่า blur สูงทำให้เงาฟุ้งมากขึ้น
- Spread ขยายหรือย่อขนาดเงา
- ค่า spread บวกทำให้เงาใหญ่ขึ้น
- ค่า spread ลบทำให้เงาเล็กลง
สีและความทึบ
- รองรับค่าสี CSS ทั่วไป
- RGBA ใช้สร้างเงาโปร่งแสง
- สีเข้มเหมาะกับเงาเพิ่มมิติ
- เงาสีเหมาะกับเอฟเฟกต์ glow
- ความทึบต่ำช่วยให้เงาดูนุ่มนวล
เงาด้านใน
- สร้างเงาภายในองค์ประกอบ
- ใช้กับเอฟเฟกต์กดลงหรือฝังลงไป
- ผสมกับเงาด้านนอกได้
- ใช้สร้าง inner glow และแสงด้านใน
- ซ้อนร่วมกับเงาอื่นได้
รูปแบบ CSS Box Shadow
/* Basic Shadow */
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
/* With Spread */
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.15);
/* Inset Shadow */
box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.2);
/* Multiple Shadows */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1),
0px 2px 4px rgba(0, 0, 0, 0.06);
ฟีเจอร์หลัก
ตัวสร้างแบบเห็นภาพ
- ตัวอย่างแบบสด
- สไลเดอร์สำหรับทุกคุณสมบัติ
- ตัวเลือกสีพร้อมช่อง hex
- ปรับสีกล่องและพื้นหลังตัวอย่างได้
- ปรับ border radius ได้
ผลลัพธ์ CSS
- สร้างโค้ด CSS แบบเรียลไทม์
- คัดลอกเฉพาะค่าเงาหรือ property เต็ม
- โค้ดสะอาดพร้อมใช้จริง
- ส่งออกสีแบบ RGBA ตามความทึบ
- ใช้งานได้ในเบราว์เซอร์สมัยใหม่
Presets และเลเยอร์
- ชุดเงามืออาชีพ 12 แบบ
- รองรับเงาหลายเลเยอร์
- ทำซ้ำและแก้ไขเลเยอร์ได้ง่าย
- เปิดปิด inset shadow ได้
- โหลด preset ได้ในคลิกเดียว
แพทเทิร์นดีไซน์
- Material Design elevation
- Neumorphism และ soft UI
- เอฟเฟกต์ neon glow
- เงาหลายชั้นเพื่อเพิ่มมิติ
- เงาคมสไตล์ retro
วิธีใช้เครื่องมือนี้
- ปรับ Offset: ใช้สไลเดอร์แนวนอนและแนวตั้งเพื่อกำหนดตำแหน่งเงา
- ตั้งค่า Blur: เพิ่มค่า blur เพื่อให้เงานุ่มขึ้น หรือใช้ 0 เพื่อให้ขอบคม
- ตั้งค่า Spread: ใช้ค่าบวกเพื่อขยายเงา หรือค่าลบเพื่อย่อเงา
- เลือกสี: เลือกสีเงาและปรับความทึบเพื่อกำหนดความโปร่งใส
- เปิด Inset: เปิด inset เพื่อสร้างเงาด้านใน
- เพิ่มเลเยอร์: เพิ่มหลายเงาและแก้ไขแต่ละเลเยอร์แยกกัน
- ลอง Presets: โหลดสไตล์เงาสำเร็จรูปได้ทันที
- คัดลอก CSS: คัดลอกค่าเงาหรือ CSS property เต็มไปยัง clipboard
คำแนะนำการออกแบบเงา
ใช้ความทึบต่ำ: เงาที่สมจริงมักดูบางเบา เริ่มที่ 10-20% แทนการใช้สีดำทึบ
ซ้อนหลายเงา: การซ้อนเงานุ่ม 2-3 ชั้นให้มิติที่เป็นธรรมชาติกว่าเงาหนักชั้นเดียว
คุมทิศทางแสง: ใช้ทิศทางเงาให้สอดคล้องกันทั้งหน้าเพื่อให้ดีไซน์ดูเป็นระบบ
ใช้เงาสี: สำหรับองค์ประกอบสี ลองใช้เฉดที่เข้มกว่าสีขององค์ประกอบเป็นสีเงา
อย่าใช้เงาหนักเกินไป: เงาที่หนักและมากเกินไปทำให้ดีไซน์ดูรกได้
ความเข้ากันได้ของเบราว์เซอร์
Box Shadow: รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด เช่น Chrome, Firefox, Safari, Edge และ Opera
หลายเงา: รองรับในเบราว์เซอร์สมัยใหม่ โดยคั่นแต่ละเลเยอร์เงาด้วย comma
Vendor Prefixes: ไม่จำเป็นต้องใช้ vendor prefixes สำหรับ syntax มาตรฐานของ box-shadow
เหมาะสำหรับ
- นักออกแบบเว็บ
- นักพัฒนา Front-end
- นักออกแบบ UI/UX
- นักพัฒนา WordPress
- ผู้ใช้ Tailwind CSS
- นักพัฒนา Bootstrap
- ผู้สร้าง Landing page
- นักพัฒนาแอป
- ผู้สร้าง component library
- ผู้สร้าง design system
- นักพัฒนา Full-stack
- นักเรียนที่กำลังเรียน CSS
ปกป้องความเป็นส่วนตัวครบถ้วน
การสร้างเงาทั้งหมดทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ งานดีไซน์ของคุณจึงเป็นส่วนตัว
เครื่องมือดีไซน์และโค้ดที่เกี่ยวข้อง
CSS Gradient Generator
สร้าง CSS gradients แบบ linear, radial และ conic ได้แบบเห็นภาพ
Color Picker
เลือกสีและแปลงระหว่าง HEX, RGB, HSL และรูปแบบสีอื่นๆ
Image Editor
แก้ไขรูปภาพด้วยฟิลเตอร์ การปรับแต่ง crop และเครื่องมือดีไซน์อื่นๆ
CSS Minifier
ย่อโค้ด CSS รวมถึง box shadows สำหรับใช้ใน production
Code Diff Checker
เปรียบเทียบไฟล์ CSS แบบ side-by-side เพื่อดูการเปลี่ยนแปลงของเงาและโค้ดอื่นๆ
HTML Table Generator
สร้างตาราง HTML พร้อมสไตล์ เงา และการปรับแต่งเอง