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

ออกแบบเอฟเฟกต์ box-shadow ด้วยภาพ พร้อมดูตัวอย่างแบบเรียลไทม์ เพิ่มเลเยอร์เงาได้หลายชั้น ปรับแต่งทุกพารามิเตอร์ และคัดลอก CSS ได้ง่ายๆ

미리보기

그림자 레이어

CSS 코드

복사됨!

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

เครื่องมือสร้าง CSS box-shadow ช่วยให้คุณสร้างเอฟเฟกต์เงาสำหรับองค์ประกอบ HTML ได้โดยไม่ต้องเขียนโค้ดเอง คุณสามารถปรับพารามิเตอร์ต่างๆ เช่น horizontal/vertical offset, blur radius, spread, color และ opacity โดยใช้ visual controls และเครื่องมือจะสร้างค่า CSS property ที่ถูกต้องให้คุณ

วิธีสร้าง Box Shadow

ปรับ Offset — ใช้แถบเลื่อน X และ Y เพื่อกำหนดตำแหน่งเงา
ตั้งค่า Blur & Spread — ควบคุมความนุ่มนวลและขนาดของเงา
เลือกสี — เลือกสีเงาและปรับความโปร่งใส
สลับ Inset — สลับระหว่างเงาด้านนอกและด้านใน
เพิ่มเลเยอร์ — ซ้อนเงาหลายชั้นเพื่อสร้างเอฟเฟกต์ที่ซับซ้อน
คัดลอก CSS — คลิกปุ่มคัดลอกเพื่อรับโค้ดสุดท้าย

ทำไมต้องใช้เครื่องมือสร้าง Box Shadow นี้

แก้ไขแบบ Visual — ดูการเปลี่ยนแปลงเงาแบบเรียลไทม์บนกล่องตัวอย่าง
หลายเลเยอร์ — รวมเงาได้สูงสุด 5 เลเยอร์เพื่อสร้างเอฟเฟกต์ความลึก
ควบคุมได้อย่างแม่นยำ — ปรับ offset, blur, spread, opacity และ inset ได้อย่างอิสระ
ผลลัพธ์ที่สะอาด — รับ CSS ที่จัดรูปแบบอย่างถูกต้องพร้อมที่จะวางลงในสไตล์ชีตของคุณ
ความเป็นส่วนตัว — ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

FreeToolbox vs เครื่องมือสร้าง Shadow อื่นๆ

คุณสมบัติ	FreeToolbox	cssmatic.com	shadows.brumm.af
หลายเลเยอร์	สูงสุด 5	ชั้นเดียว	ไม่จำกัด
สลับ Inset	ใช่	ใช่	ไม่ใช่
ควบคุม Opacity	ใช่	จำกัด	ใช่
โฆษณา	น้อยที่สุด	เยอะ	ไม่มี
ธีมสีเข้ม	ใช่	ไม่ใช่	ใช่

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

Blur กับ Spread ต่างกันอย่างไร

Blur ควบคุมความนุ่มนวล/การกระจายของขอบเงา Spread ควบคุมขนาดของเงาที่ขยายหรือหดตัวจากขนาดขององค์ประกอบ Spread ที่เป็นบวกจะทำให้ใหญ่ขึ้น Spread ที่เป็นลบจะทำให้เล็กลง

ฉันสามารถเพิ่มเงาหลายชั้นได้หรือไม่

ได้ คลิก 'Add Layer' เพื่อซ้อนเงาได้สูงสุด 5 เลเยอร์ แต่ละเลเยอร์มีการควบคุมพารามิเตอร์ทั้งหมดอย่างอิสระ

Inset ทำอะไร

Inset ย้ายเงาไปด้านในองค์ประกอบแทนที่จะอยู่ด้านนอก สร้างเงาด้านในหรือเอฟเฟกต์กดลงไป

ใช้กับ text-shadow ได้ไหม

เครื่องมือนี้สร้าง CSS box-shadow Text-shadow ใช้ไวยากรณ์ที่คล้ายกัน แต่ไม่มีค่า spread หรือตัวเลือก inset คุณสามารถปรับผลลัพธ์ได้ด้วยตนเอง

เครื่องมือนี้ฟรีหรือไม่

ฟรีอย่างสมบูรณ์ ไม่มีข้อจำกัดหรือการลงทะเบียน