DevTulz Online

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

พื้นหลัง


CSS Box Shadow คืออะไร?

คุณสมบัติ CSS box-shadow เพิ่มเอฟเฟกต์เงารอบกรอบขององค์ประกอบ เงาสามารถเลื่อน เบลอ กระจาย ระบายสี และตั้งค่าเป็น inset (เงาด้านใน) ได้ เงาหลายรายการที่คั่นด้วยเครื่องหมายจุลภาคสามารถวางซ้อนกันเพื่อสร้างเอฟเฟกต์ที่สวยงาม เครื่องมือนี้ช่วยให้คุณสร้างเงาหลายเลเยอร์ที่ซับซ้อนแบบภาพและคัดลอก CSS ที่พร้อมวางไปยังคลิปบอร์ด

วิธีใช้เครื่องมือสร้าง Box Shadow

  1. ปรับแถบเลื่อนสำหรับ Offset X/Y, Blur และ Spread เพื่อกำหนดตำแหน่งและรูปร่างของเงา

  2. คลิกที่ตัวอย่างสีเพื่อเลือกสีเงา และใช้แถบเลื่อน Opacity สำหรับความโปร่งใส

  3. สลับ 'Inset' เพื่อสร้างแสงเรืองภายในหรือเอฟเฟกต์กดลง

  4. คลิก '+ เพิ่มเลเยอร์' เพื่อซ้อนเงาหลายชั้น

  5. คัดลอก CSS ที่สร้างขึ้นและวางลงในสไตล์ชีตของคุณ

Keywords: เครื่องมือสร้าง CSS box shadow, box-shadow CSS, เครื่องมือเงา CSS, CSS drop shadow, inset shadow, เงาหลายเลเยอร์, CSS shadow ออนไลน์