ตัวสร้าง CSS Box Shadow

เครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรีพร้อมการแสดงผลแบบเรียลไทม์ สามารถซ้อนทับเงาได้หลายชั้น เลือกจากค่าที่กำหนดไว้ล่วงหน้า สลับโหมดเงาด้านใน (inset) และคัดลอกโค้ดที่พร้อมใช้งานได้ทันที การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ

ตัวอย่างด่วน:

แสดงตัวอย่างสด

↕ ลากเพื่อตั้งค่าระยะห่าง

เลเยอร์เงา

ตั้งค่าเลเยอร์

ระยะ X px

ระยะ Y px

ความเบลอ px

การแผ่กระจาย px

สี

ความทึบ %

เงาด้านใน (Inset)

ค่าล่วงหน้าที่คัดสรร

CSS ที่สร้างขึ้น

Embed ตัวสร้าง CSS Box Shadow Widget

เกี่ยวกับ ตัวสร้าง CSS Box Shadow

ตัวสร้าง CSS Box Shadow ช่วยให้คุณออกแบบเอฟเฟกต์ box-shadow ได้ด้วยภาพและคัดลอก CSS ที่พร้อมใช้งานได้ทันที คุณสามารถวางเลเยอร์เงาซ้อนกันหลายชั้น เลือกจากค่าล่วงหน้าที่คัดสรรมาแล้วซึ่งได้รับแรงบันดาลใจจาก Material Design, Tailwind CSS และ Neumorphism หรือลากบนภาพตัวอย่างโดยตรงเพื่อกำหนดตำแหน่งเงา ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ โค้ดของคุณจะไม่ถูกส่งออกจากหน้าเว็บนี้

วิธีใช้งาน ตัวสร้าง CSS box shadow

ปรับการควบคุมเงา — ใช้แถบเลื่อนเพื่อตั้งค่าระยะห่างแนวนอน (X), ระยะห่างแนวตั้ง (Y), รัศมีความเบลอ และรัศมีการแผ่กระจาย คุณยังสามารถลากบนพื้นที่แสดงตัวอย่างโดยตรงเพื่อจัดตำแหน่งเงาได้อย่างเป็นธรรมชาติ
เลือกสีและความโปร่งใส — เลือกสีเงาด้วยตัวเลือกสีและปรับแต่งความโปร่งใสด้วยแถบเลื่อนความทึบ ตัวอย่างจะอัปเดตแบบเรียลไทม์
เพิ่มหลายเลเยอร์หรือใช้ค่าล่วงหน้า — คลิก + เพิ่มเลเยอร์เงา เพื่อซ้อนเงาให้ดูมีมิติสมจริง หรือเลือกค่าล่วงหน้าที่คัดสรรไว้ (Material, Tailwind, Neumorphism ฯลฯ) เพื่อเริ่มจากดีไซน์ที่ผ่านการทดสอบมาแล้ว
คัดลอก CSS — คลิก คัดลอก เพื่อรับโค้ด box-shadow ที่สร้างขึ้นและนำไปวางในสไตล์ชีทของคุณได้โดยตรง

ทำความเข้าใจไวยากรณ์ box-shadow

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

การเลื่อนเงาในแนวนอนและแนวตั้ง ค่าที่เป็นบวกจะเลื่อนไปทางขวา/ล่าง ค่าที่เป็นลบจะเลื่อนไปทางซ้าย/บน

blur-radius

ควบคุมความเบลอของเงา 0 จะทำให้ขอบคม ค่าที่สูงขึ้นจะสร้างเงาที่นุ่มนวลและฟุ้งกระจายมากขึ้น

spread-radius

ขยายหรือหดขนาดของเงา ค่าบวกจะทำให้เงาใหญ่ขึ้น ค่าลบจะทำให้เงาเล็กลง มีประโยชน์สำหรับสร้างเอฟเฟกต์ใต้ซอกองค์ประกอบ

inset

เมื่อใส่ค่านี้ เงาจะถูกวาดไว้ด้านในองค์ประกอบแทนที่จะเป็นด้านนอก มักใช้สำหรับปุ่มที่ดูเหมือนถูกกดและช่องกรอกข้อมูลที่ดูบุ๋มลงไป

เคล็ดลับสำหรับ Box Shadows แบบมือโปร

เลเยอร์เงาหลายชั้น — วัตถุในโลกจริงมีเงาที่ซับซ้อน การใช้เงา 2-3 ชั้น (เลเยอร์แสงรอบข้างที่นุ่มนวล + เลเยอร์แสงหลักที่คมชัดกว่า) จะให้ผลลัพธ์ที่สมจริงกว่าการใช้เงาชั้นเดียวมาก
ใช้ความทึบต่ำ — เงาที่มีความทึบประมาณ 8-20% จะดูเป็นธรรมชาติ หลีกเลี่ยงเงาสีดำที่มีความทึบสูงซึ่งอาจดูแข็งและล้าสมัย
ให้ทิศทางแสงตรงกัน — รักษาค่าการเลื่อนเงาให้สอดคล้องกันทั่วทั้ง UI ของคุณเพื่อจำลองแหล่งกำเนิดแสงเพียงแหล่งเดียว เงาที่ไม่ไปในทิศทางเดียวกันจะทำลายภาพลวงตาทางสายตา
เงาแบบมีสี — แทนที่จะใช้สีดำ ลองใช้เฉดสีที่เข้มกว่าของสีพื้นหลังองค์ประกอบเพื่อให้ได้ลุคที่ดูทันสมัยและเข้ากันได้ดีขึ้น
ค่าการแผ่กระจายติดลบ (Negative spread) — ค่าการแผ่กระจายที่เป็นลบจะช่วยย่อเงาให้เล็กกว่าองค์ประกอบ สร้างเงาสัมผัสที่ดูแนบเนียนซึ่งช่วยขับเน้นองค์ประกอบโดยไม่มีขอบเงาที่ดูเกินจริง

อธิบายสไตล์เงายอดนิยม

Material Design Elevation — ใช้เลเยอร์เงาสองชั้น: เงาบรรยากาศที่นุ่มนวลกว่าและเงาหลักที่คมชัดกว่า ระดับความสูงที่ต่างกัน (1-5) จะเพิ่มระยะเลื่อนและความเบลอขึ้นตามลำดับ
Tailwind CSS Utilities — Tailwind มีคลาส shadow, shadow-md, shadow-lg, shadow-xl และ shadow-2xl ซึ่งแต่ละคลาสใช้เงาสองชั้นที่ปรับแต่งมาเพื่อใช้กับการ์ดและ Modal ทั่วไป
Neumorphism — สร้างเอฟเฟกต์พลาสติกที่ดูนุ่มนวลและนูนออกมาโดยใช้เงาสองด้านที่ตรงข้ามกัน (ด้านหนึ่งสว่าง อีกด้านหนึ่งมืด) ทำงานได้ดีที่สุดบนพื้นหลังสีเทาอ่อนที่เห็นเงาทั้งสองด้านชัดเจน
Glassmorphism — จับคู่เงาบางๆ กับ backdrop-filter blur และพื้นหลังกึ่งโปร่งใส เงาจะช่วยเพิ่มความลึกใต้เอฟเฟกต์กระจกฝ้า

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

คุณสมบัติ CSS box-shadow คืออะไร?

คุณสมบัติ CSS box-shadow ใช้เพิ่มเอฟเฟกต์เงารอบกรอบขององค์ประกอบ โดยรับค่าระยะห่างแนวนอน, ระยะห่างแนวตั้ง, รัศมีความเบลอ, รัศมีการแผ่กระจาย และสี สามารถแยกเงาหลายชั้นด้วยเครื่องหมายจุลภาคเพื่อสร้างเอฟเฟกต์ความลึกที่ซ้อนกัน

ฉันจะสร้าง box shadow หลายชั้นใน CSS ได้อย่างไร?

สร้างเงาหลายชั้นได้โดยการแยกคำจำกัดความของแต่ละเงาด้วยเครื่องหมายจุลภาค ตัวอย่างเช่น: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1) โดยแต่ละเงาจะถูกแสดงทับเงาก่อนหน้า และเงาแรกจะปรากฏอยู่ด้านบนสุด

ความแตกต่างระหว่าง box-shadow และ drop-shadow คืออะไร?

box-shadow จะใช้เงากับกรอบสี่เหลี่ยมขององค์ประกอบ ในขณะที่ filter: drop-shadow() จะดำเนินตามรูปทรงจริงรวมถึงส่วนที่โปร่งใส box-shadow รองรับรัศมีการแผ่กระจายและโหมด inset ซึ่ง drop-shadow ไม่รองรับ สำหรับองค์ประกอบสี่เหลี่ยมมาตรฐาน box-shadow เป็นที่นิยมใช้มากกว่าและมีประสิทธิภาพดีกว่า

inset box shadow คืออะไร?

เงาแบบ inset จะปรากฏด้านในองค์ประกอบแทนที่จะเป็นด้านนอก สร้างขึ้นโดยการเพิ่มคำสำคัญ inset ไว้หน้าค่าของเงา เงามักใช้สำหรับเอฟเฟกต์ปุ่มที่ถูกกด, การตกแต่งช่องกรอกข้อมูล และการสร้างลักษณะที่ดูยุบลง

ค่า box-shadow ที่ดีสำหรับเอฟเฟกต์การ์ดที่ดูเรียบง่ายคืออะไร?

เงาการ์ดที่เรียบง่ายยอดนิยมจะใช้สองเลเยอร์: 0 1px 3px rgba(0,0,0,0.12) สำหรับเงาใกล้ และ 0 1px 2px rgba(0,0,0,0.24) สำหรับการเน้นขอบ ส่วน Tailwind CSS ใช้ 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) สำหรับยูทิลิตี้เงามาตรฐาน

อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:

"ตัวสร้าง CSS Box Shadow" ที่ https://MiniWebtool.com/th/ตัวสร้าง-css-box-shadow/ จาก MiniWebtool, https://MiniWebtool.com/

โดยทีม miniwebtool อัปเดตเมื่อ: 2026-03-07

มี Developer API ให้ใช้งาน: เรียกใช้เครื่องมือนี้จากแอป ระบบอัตโนมัติ หรือเอเจนต์ของคุณด้วยคำขอ JSON HTTP หนึ่งครั้ง ดูเอกสาร API