Go Toolstack

ตัวสร้างเงา CSS

ออกแบบและปรับแต่งเอฟเฟกต์เงา CSS box-shadow หลายชั้น พร้อมสร้างโค้ด CSS ทันที

ตัวสร้างเงา CSS

ออกแบบและปรับแต่งเอฟเฟกต์เงา CSS box-shadow หลายชั้น พร้อมสร้างโค้ด CSS ทันที

วิธีการทำงาน

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

วิธีตรวจสอบและลบข้อมูลเมทาดาตา EXIF ที่ฝังอยู่ในรูปภาพ รวมถึงพิกัดดาวเทียม GPS รุ่นกล้อง และวันเวลาถ่ายภาพ ด้วยการเรนเดอร์ใหม่บน Canvas ในเบราว์เซอร์เพื่อความปลอดภัย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือสร้างเงา CSS Box Shadow ออกแบบเงาหลายชั้น มิติความลึก และโหมด Inset

การสร้างเงาด้วยคุณสมบัติ box-shadow ใน CSS เป็นเทคนิคสำคัญในการสร้างมิติความลึก (Elevation) ให้กับองค์ประกอบบนหน้าเว็บ เช่น การ์ด ปุ่มกด หรือหน้าต่าง Modal การเขียนโค้ดด้วยมืออาจยากที่จะได้เงาที่ดูนุ่มนวลและเป็นธรรมชาติ

เครื่องมือนี้ช่วยให้คุณปรับแต่งพารามิเตอร์ของเงาได้แบบเรียลไทม์ ทั้งแกน X, แกน Y, รัศมีความเบลอ (Blur), รัศมีการกระจาย (Spread), ความโปร่งใสของสี (RGBA), และการซ้อนเงาหลายชั้น (Multi-layer Shadows) เพื่อจำลองการสะท้อนของแสงจริง พร้อมคัดลอกโค้ด CSS ไปใช้ได้ทันที

สูตรและหลักการทางเทคนิค

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> rgba(r, g, b, alpha)

สร้างคำสั่ง CSS box-shadow ตามมาตรฐาน โดยการใช้ค่า Spread ติดลบช่วยให้ขอบเขตเงาหดตัวและสร้างมิติการกระจายแสงรอบข้างที่ดูนุ่มนวลสมจริง

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • ซ้อนเงาหลายชั้นเพื่อความนุ่มนวลสมจริง (Layered Shadows): แทนที่จะใช้เงาชั้นเดียวที่ดูแข็ง ให้ผสมผสานระหว่างเงาชั้นแคบที่คมชัดเพื่อบอกขอบ และเงาชั้นกว้างที่เบลอเพื่อบอกมิติความลึก
  • ใช้ค่า Spread ติดลบเพื่อลดความคมของเงา: การกำหนด spread-radius ติดลบเล็กน้อยจะช่วยให้เงาไม่ดูล้นออกนอกขอบองค์ประกอบมากเกินไป
  • ใช้สีเงาที่อิงตามสีพื้นหลังแทนสีดำล้วน: ในงานออกแบบระดับพรีเมียม ให้ผสมสีของพื้นหลังเล็กน้อยลงในสีเงา (เช่น สีกรมท่าเข้มสำหรับพื้นหลังสีฟ้า) แทนการใช้สีดำล้วนที่มีความโปร่งใส
  • ใช้โหมด Inset สำหรับองค์ประกอบที่มีสถานะยุบตัว: เงาด้านใน (Inset) เหมาะสำหรับช่องกรอกข้อมูล (Input) หรือปุ่มที่กำลังถูกกด (Active state) เพื่อสื่อถึงการยุบลงไปในระนาบ

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

ความแตกต่างระหว่าง Blur Radius และ Spread Radius คืออะไร?
Blur Radius ควบคุมความฟุ้งเบลอของขอบเงา ยิ่งค่ามากเงามิ่งฟุ้งกระจาย ส่วน Spread Radius ควบคุมการขยายขนาดหรือหดตัวของพื้นที่เงาโดยรอบ
เหตุใดเงาที่ออกแบบด้วยชั้นเดียวจึงมักดูไม่สวยงามเท่าเงาแบบหลายชั้น?
เพราะแสงธรรมชาติในโลกความจริงมีทั้งแสงตรงและแสงสะท้อนรอบทิศทาง การใช้เงาหลายชั้น (Ambient + Direct Shadow) จึงจำลองมิติการตกกระทบของแสงได้ใกล้เคียงความจริงมากกว่า
โค้ด CSS Box Shadow ที่สร้างขึ้นรองรับเบราว์เซอร์ใดบ้าง?
รองรับเว็บเบราว์เซอร์สมัยใหม่ทั้งหมด 100% ตามมาตรฐาน CSS3 โดยไม่ต้องใส่ Vendor Prefix
การใช้เงาหลายชั้นส่งผลกระทบต่อประสิทธิภาพการแสดงผลของหน้าเว็บหรือไม่?
ส่งผลน้อยมากบนอุปกรณ์ปัจจุบัน อย่างไรก็ตาม ควรหลีกเลี่ยงการใส่เงาที่ซับซ้อนเกินไปบนองค์ประกอบที่มีการเลื่อนหน้าจอต่อเนื่อง (Scrolling) หรือแอนิเมชันที่ซับซ้อน