ตัวสร้าง CSS Box Shadow

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

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

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

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

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

เคล็ดลับสำหรับ 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) สำหรับยูทิลิตี้เงามาตรฐาน