สร้าง CSS Box-Shadow
สร้างเงากล่องแบบชั้นเดียวหรือหลายชั้นพร้อมพรีวิวสด แล้วคัดลอกโค้ด CSS
box-shadow: 0px 10px 25px -5px #0f172a40;
เกี่ยวกับเครื่องมือนี้
เครื่องมือ สร้าง CSS Box-Shadow ช่วยให้คุณออกแบบเงาของกล่องได้อย่างแม่นยำโดยไม่ต้องเดาค่าเอง เพียงเลื่อนปรับค่าต่าง ๆ แล้วดูผลลัพธ์เปลี่ยนแบบเรียลไทม์ทันที เหมาะสำหรับนักพัฒนาเว็บและดีไซเนอร์ที่อยากได้เงาสวย ๆ พร้อมโค้ด CSS ที่ก็อปไปใช้ได้เลย
จุดเด่นคือรองรับ เงาหลายชั้น (layered box-shadow) ซึ่งเป็นเทคนิคยอดนิยมในการสร้างเงาที่ดูนุ่มและสมจริง แทนที่จะใช้เงาเดียวที่ดูแข็ง คุณสามารถซ้อนเงาหลายชั้นที่มีระยะและความฟุ้งต่างกันเพื่อให้กล่องดูลอยขึ้นมาอย่างเป็นธรรมชาติ ไม่ว่าจะเป็นการ์ด ปุ่ม หรือ modal
คุณควบคุมได้ทุกค่าที่จำเป็นสำหรับการ สร้างเงา css
- ระยะแนวนอน (offset-x) และแนวตั้ง (offset-y) กำหนดทิศทางที่เงาทอดไป
- ความเบลอ (blur radius) ปรับให้ขอบเงาคมหรือฟุ้ง
- การขยาย (spread radius) เพิ่มหรือลดขนาดเงา
- สีและความโปร่งใส เลือกได้อิสระเพื่อให้เข้ากับธีม
- โหมด inset สำหรับเงาด้านในกล่อง
ทุกครั้งที่ปรับค่า โค้ด css box shadow จะอัปเดตให้พร้อมคัดลอก เป็น CSS มาตรฐานที่ใช้ได้กับทุกเบราว์เซอร์และทุกเฟรมเวิร์ก เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ใช้ฟรี ไม่ต้องสมัครสมาชิก และไม่มีการส่งข้อมูลใด ๆ ออกไป หากต้องการแต่งหน้าตาเพิ่มเติม ลองดูเครื่องมืออื่น ๆ ใน หน้ารวมเครื่องมือ ของเราที่ช่วยงานออกแบบและพัฒนาเว็บได้อีกมาก
วิธีใช้งาน
- 1ปรับค่าของเงา ได้แก่ ระยะแนวนอน (X) แนวตั้ง (Y) ความเบลอ (blur) การขยาย (spread) และสี
- 2ดูพรีวิวสดของกล่องที่เปลี่ยนตามค่าทันที ไม่ต้องรีเฟรช
- 3เพิ่มเงาหลายชั้นเพื่อสร้างมิติแบบลอยหรือเงาซ้อนตามต้องการ
- 4เปิดหรือปิดโหมด inset เพื่อให้เงาอยู่ด้านในกล่อง
- 5กดคัดลอกโค้ด CSS แล้วนำไปวางในไฟล์สไตล์ของคุณได้เลย
คำถามที่พบบ่อย
- เครื่องมือนี้ใช้ฟรีไหม
- ใช้ฟรีทั้งหมด ไม่ต้องสมัครสมาชิก และทำงานในเบราว์เซอร์โดยตรง ไม่ส่งข้อมูลขึ้นเซิร์ฟเวอร์
- เงาหลายชั้นทำงานยังไง
- CSS รองรับการใส่หลายเงาในพร็อพเพอร์ตี้เดียวโดยคั่นด้วยลูกน้ำ เงาชั้นแรกจะอยู่บนสุด เครื่องมือนี้รวมทุกชั้นให้อัตโนมัติ
- ค่า spread กับ blur ต่างกันยังไง
- blur คือความฟุ้งของขอบเงา ส่วน spread คือการขยายหรือหดขนาดเงาก่อนจะฟุ้ง ใช้คู่กันเพื่อปรับความนุ่มและขนาด
- inset shadow คืออะไร
- เงาแบบ inset จะแสดงด้านในของกล่องแทนที่จะออกด้านนอก เหมาะกับการทำช่องกดยุบหรือเอฟเฟกต์ลึก
- นำโค้ดไปใช้กับเฟรมเวิร์กไหนได้บ้าง
- เป็น CSS มาตรฐาน จึงใช้ได้กับทุกโปรเจกต์ ทั้ง HTML ล้วน React Vue หรือ Tailwind ผ่าน arbitrary value