RevealTheme logo

เครื่องมือสร้าง Box Shadow CSS

สร้างค่า box-shadow ใน CSS แบบมองเห็นภาพได้ ดูตัวอย่างแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้น

box-shadow: 0px 8px 16px 0px #00000033;

เครื่องมือสร้าง Box Shadow CSS คืออะไร?

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

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

ฉันจะซ้อนเงาหลายชั้นได้อย่างไร?
คั่นด้วยเครื่องหมายจุลภาคในค่าของ box-shadow การซ้อนกันจะสร้างความลึกที่สมจริงกว่าเงาเดี่ยว
ความแตกต่างระหว่างเบลอกับการขยายคืออะไร?
เบลอ (blur) ทำให้ขอบของเงานุ่มนวลขึ้น ส่วนการขยาย (spread) เพิ่มหรือลดขนาดของเงาก่อนที่จะทำให้เบลอ

เครื่องมือที่เกี่ยวข้อง

เครื่องมือแปลงสี (HEX/RGB/HSL)

แปลงสีระหว่างรูปแบบ HEX, RGB และ HSL เลือกสีด้วยภาพหรือป้อนค่าด้วยตนเอง

เครื่องมือสร้างไล่ระดับสีของ CSS

สร้างไล่ระดับสีของ CSS แบบเส้นตรงและแบบรัศมี เลือกสีแบบเห็นภาพและคัดลอก CSS ที่สร้างขึ้น

เครื่องมือสร้างเส้นโค้งการเร่งความเร็ว Cubic Bezier

สร้างเส้นโค้งการเร่งความเร็ว cubic-bezier สำหรับ CSS รวมค่าที่ตั้งไว้ล่วงหน้าแบบมาตรฐาน

เครื่องมือสร้างชุดสี

สร้างชุดสีที่กลมกลืนจากสีฐานใดก็ได้ รองรับโทนสีคู่ตรงข้าม สีข้างเคียง สามสีไตรแอด และสีโมโนโครม

เครื่องมือสร้าง Border Radius CSS

สร้างค่า border-radius ที่ซับซ้อนใน CSS แบบมองเห็นภาพได้ ควบคุมแต่ละมุมได้อย่างอิสระ

ตัวสร้าง CSS Clamp()

สร้างค่า CSS แบบลื่นไหลและตอบสนองด้วย clamp() ปรับขนาดอย่างนุ่มนวลระหว่างขนาดต่ำสุดและสูงสุดตลอดช่วงของ viewport

สมัครรับข่าวสารอัปเดต

เราไม่ขายอีเมลของคุณ เราไม่ส่งสแปม

© 2026 RevealTheme. All rights reserved.