สร้างเงากล่อง 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

สร้างเลย์เอาต์ Flexbox ที่สมบูรณ์แบบ

แสดงภาพ ปรับแต่ง และสร้างโค้ดเฟล็กซ์บ็อกซ์ CSS ด้วยอินเทอร์เฟซแบบลากและวางที่ใช้งานง่ายของเรา

ตัวแปลงสไตลัสเป็น CSS

แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

ตัวแปลง SCSS เป็น CSS

แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

ตัวแปลงหน่วยอุณหภูมิ

แปลงระหว่างหน่วยอุณหภูมิต่างๆ ด้วยความแม่นยําสําหรับความต้องการทางวิทยาศาสตร์และในชีวิตประจําวันของคุณ

แปลงมุมด้วยความแม่นยํา

แปลงระหว่างหน่วยมุมต่างๆ ได้อย่างง่ายดายด้วยเครื่องมือแปลงที่ใช้งานง่ายของเรา เหมาะสําหรับวิศวกร นักเรียน และมืออาชีพ

CMYK เป็น HSV

แปลงค่าสี CMYK เป็นแบบจําลองสี HSV สําหรับการใช้งานดิจิทัล