ตัวสร้าง CSS Box Shadow
สร้าง box-shadow โดยเลื่อนแถบปรับและดูผลบนการ์ด ซ้อนได้สูงสุดหกชั้นเพื่อให้เงานุ่มและสมจริงขึ้น ใช้ inset สำหรับเอฟเฟกต์กดลง และเริ่มจากค่าที่ตั้งไว้ เช่น นุ่ม ลอย เรืองแสง หรือ neumorphism คัดลอก CSS ได้ในคลิกเดียว
วิธีใช้
- เลือกค่าที่ตั้งไว้ หรือปรับระยะเยื้อง ความเบลอ การขยาย สี และความทึบของเงา
- เพิ่มชั้นด้วย + และเลือกแต่ละชั้นเพื่อแก้ไข เปลี่ยนพื้นหลัง สีกล่อง และรัศมีมุมให้เข้ากับดีไซน์ของคุณ
- คัดลอก CSS แล้ววางลงในกฎของ element
คำถามที่พบบ่อย
ความเบลอและการขยายทำหน้าที่อะไร
ความเบลอทำให้ขอบเงานุ่มขึ้น ค่าศูนย์ให้ขอบคม การขยายทำให้เงาใหญ่ขึ้นทุกทิศก่อนเบลอ และค่าติดลบทำให้เงาเล็กลง ช่วยให้เงาเบลอขนาดใหญ่อยู่ใต้ element
ทำไมต้องใช้เงาหลายชั้น
เงาจริงเข้มใกล้วัตถุและจางลงเมื่อไกลออกไป การรวมเงาเล็กที่คมกับเงาใหญ่ที่นุ่มกว่าจะเลียนแบบสิ่งนั้นและดูเป็นธรรมชาติกว่าเงาชั้นเดียว ชั้นแรกในรายการจะถูกวาดอยู่บนสุด
box-shadow ทำให้หน้าเว็บช้าลงหรือไม่
ไม่ในการใช้งานทั่วไป ความเบลอขนาดใหญ่มากกับหลาย element หรือการทำแอนิเมชันกับตัวเงาเอง อาจกินประสิทธิภาพบนมือถือที่ช้า หากต้องการทำแอนิเมชัน ให้เปลี่ยนความทึบของ pseudo-element ที่มีเงาแทน
🏷️ ตัวสร้าง Meta Tag
🖼️ ตัวสร้าง Open Graph
🔗 ตัวสร้างลิงก์ UTM
🌈 ตัวสร้างไล่เฉดสี CSS