Card Shadow CSS - โค้ดกล่องเงาที่ละเอียดอ่อน
สร้างโค้ดกล่องเงา CSS ด้วยสายตา: แถบเลื่อนสำหรับออฟเซ็ต เบลอ กระจาย สีด้วยความทึบ โหมดแทรก และสูงสุดสี่เลเยอร์พร้อมการแสดงตัวอย่างแบบสด
ผลลัพธ์
หน้านี้จะเปิดเครื่องสร้างเงากล่องที่ตั้งค่าไว้ล่วงหน้าเป็นเงาการ์ดแบบคลาสสิก: ลดลง 2px, เบลอ 8px, ความทึบสีดำ 15% มันเป็นการจงใจเงียบ — เพียงพอที่จะแยกการ์ดออกจากหน้าโดยไม่ต้องประกาศตัวเอง — และตัวอย่างแสดงให้เห็นว่าเงียบแค่ไหน
ช่วงนี้สอดคล้องกับขั้นตอนการยกระดับต่ำสุดในระบบการออกแบบส่วนใหญ่: การ์ดรายการ เมนูแบบเลื่อนลง ป๊อปโอเวอร์ และแถวของตารางเมื่อโฮเวอร์ หากคุณต้องการการยกระดับที่แข็งแกร่งขึ้นสำหรับโมดอลหรือพาเนลแบบลอย ให้เพิ่มค่าออฟเซ็ต Y และเบลอพร้อมกัน โดยค่าเหล่านี้ควรขยายตามสัดส่วนเพื่อรักษาให้แหล่งกำเนิดแสงดูน่าเชื่อถือ
คัดลอกเส้นกล่องเงาลงในสไตล์คอมโพเนนต์ของคุณ หรือทำซ้ำเป็นเลเยอร์ที่สองโดยมีความเบลอที่เข้มขึ้นเพื่อเพิ่มคำจำกัดความของขอบ เครื่องมือนี้ฟรีและทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ