สร้างเงากล่อง CSS ที่สวยงามได้อย่างง่ายดาย
สร้างเงากล่องที่น่าทึ่งด้วยอินเทอร์เฟซที่ใช้งานง่ายของเรา คัดลอกโค้ด CSS และใช้ในโครงการของคุณทันที
Preview
เงากล่อง
ปรับแต่งฉันเอง
เอาต์พุต CSS
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
การควบคุมเงา
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
เงานุ่ม
เงาปานกลาง
เงาหนัก
เงาภายใน
เส้นทแยงมุมคมชัด
เค้าร่างเรืองแสง
เงาคู่
เอฟเฟกต์ยก
วิธีใช้
การควบคุมพื้นฐาน
- ปรับออฟเซ็ตแนวนอนเพื่อเลื่อนเงาไปทางซ้ายหรือขวา
- ปรับออฟเซ็ตแนวตั้งเพื่อเลื่อนเงาขึ้นหรือลง
- เพิ่มรัศมีเบลอเพื่อทําให้เงานุ่มขึ้น
- Use รัศมีการแพร่กระจายเพื่อเพิ่มหรือลดขนาดโดยรวมของเงา
- เปลี่ยนColor and Opacityเพื่อปรับแต่งลักษณะเงา
คุณสมบัติขั้นสูง
- Enable เงาแทรกเพื่อสร้างเอฟเฟ็กต์เงาภายใน
- Use เงาหลายเงาสําหรับเอฟเฟกต์ที่ซับซ้อนมากขึ้น
- บันทึกและโหลดPresetsเพื่อการเข้าถึงเงาที่คุณชื่นชอบอย่างรวดเร็ว
- Click เงาสุ่มเพื่อแรงบันดาลใจ
- คัดลอกโค้ด CSS ที่สร้างขึ้นแล้ววางลงในโปรเจ็กต์ของคุณ
Related Tools
ตัวย่อขนาด CSS
บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ
Less to CSS Converter
แปลงโค้ด Less ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย
สร้างการแปลง CSS3 ได้อย่างง่ายดาย
เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ
ตัวแปลงตัวเลขดิจิตอล
แปลงระหว่างระบบเลขฐานสอง ทศนิยม เลขฐานสิบหก และฐานแปดอย่างแม่นยํา
Generate dummy text for your designs
สร้างข้อความตัวยึดตําแหน่งที่สมจริงสําหรับเว็บไซต์ แอป และเอกสารของคุณด้วยตัวสร้าง Lorem Ipsum ของเรา
HSV เป็น HEX
แปลงรหัสสี HSV เป็นค่า HEX สําหรับการออกแบบเว็บ