สร้าง CSS box shadow

วิธีใช้งาน ตัวสร้าง box shadow

1. 1

   เลือกเงาเริ่มต้น

   คลิกค่าที่ตั้งไว้ล่วงหน้า เช่น นุ่มนวล ซ้อนหลายชั้น หรือระดับความสูง 2 หรือปรับเลเยอร์เริ่มต้น

2. 2

   ปรับแต่งแต่ละเลเยอร์

   เลือกเลเยอร์ แล้วตั้งค่าระยะเยื้อง X และ Y ความเบลอ การกระจาย สี ความโปร่งใส และด้านใน

3. 3

   ตรวจดูบนพื้นผิวของคุณ

   เปลี่ยนขนาดกล่อง รัศมีมุม และสีให้ตรงกับองค์ประกอบที่คุณกำลังจัดสไตล์

4. 4

   คัดลอก CSS

   คัดลอกคำสั่ง box-shadow หรือคลาส Tailwind ไปใส่ในโค้ดของคุณ

เกี่ยวกับ ตัวสร้าง box shadow

คุณสมบัติ box-shadow ใน CSS รับค่าเป็นรายการของเลเยอร์ โดยแต่ละเลเยอร์มีระยะเยื้องแนวนอนและแนวตั้ง รัศมีความเบลอ ระยะการกระจาย สี และคีย์เวิร์ด inset ที่ใส่หรือไม่ใส่ก็ได้ การสร้างมิติที่ดูเป็นธรรมชาติต้องปรับสมดุลของค่าทั้งหมดนี้ในสองเลเยอร์ขึ้นไป ซึ่งทำได้ยากหากแก้ตัวเลขในสไตล์ชีตโดยตรง เครื่องมือนี้แสดงผลบนกล่องตัวอย่างแบบสดขณะที่คุณลากแถบเลื่อน พร้อมเขียนคำสั่งและคลาส Tailwind shadow-[…] ให้

เพิ่มเลเยอร์ได้ตามต้องการ ซ่อนบางเลเยอร์ชั่วคราวเพื่อเปรียบเทียบ เลื่อนขึ้นหรือลง (เลเยอร์แรกในรายการจะถูกวาดอยู่บนสุด) หรือสลับเป็น inset สำหรับปุ่มที่ดูเหมือนถูกกดและช่องกรอกข้อมูล ระยะเยื้องมีค่าตั้งแต่ −100 ถึง 100 พิกเซล ความเบลอสูงสุด 200 พิกเซล และการกระจายตั้งแต่ −100 ถึง 100 โดยทุกสีมีความโปร่งใสของตัวเอง ค่าการกระจายที่เป็นลบคือเคล็ดลับของเงานุ่ม ๆ สมัยใหม่ เพราะดึงเงาเข้าไปอยู่ใต้องค์ประกอบ เหลือเพียงแสงจาง ๆ ด้านล่าง

คุณปรับขนาดกล่องตัวอย่างได้ รวมถึงรัศมีมุม สีกล่อง และสีพื้นหลัง เพื่อดูเงาบนพื้นผิวจริงของดีไซน์ รวมถึงธีมมืดที่เงาต้องมีความโปร่งใสน้อยลงหรือใช้แสงเรืองสี

มีค่าที่ตั้งไว้ล่วงหน้า 12 แบบ ได้แก่ ระดับความสูงของ Material Design สี่ระดับ เงาชั้นเดียวแบบนุ่มนวล เงาเนียนห้าเลเยอร์ เงาเยื้องแข็งแบบ neubrutalist นิวมอร์ฟิซึม เงาด้านใน แสงเรืองสี วงแหวนขอบแบบโฟกัส และการ์ดลอยเด่น การไล่สีอยู่อีกแท็บ ส่วนเงาข้อความและฟิลเตอร์ drop-shadow() ไม่รองรับ

ตัวสร้าง box shadow: คำถามที่พบบ่อย