ดีที่สุด เครื่องมือสร้างเงากล่อง CSS
สร้างภาพเงากล่องแบบ CSS ด้วยการแสดงตัวอย่างสด, วางและเลเยอร์ที่2- คัดลอกรหัส
ฟรี 100%
ไม่มีการลงทะเบียน
ไม่มีสัญลักษณ์น้ำ
✨
ไปโปรเพื่อโมเดล AI ที่ยอดเยี่ยมที่สุด - ภาพ, วิดีโอและการสนทนา - บวกกับการอัปโหลดขนาดใหญ่, ความสำคัญในคิวและไม่ต้องรอ
ปรับปรุงเป็น Pro
รัก Best.Free? แบ่งปันมัน
มันทำงานยังไง
- ปรับแต่งการแสดงผล. ตั้งค่าการโอฟฟิชชั่น, ความคลุมเครือ, ความแตกต่าง, สีและความไม่โปร่งใส; เปิด/ ปิดการแสดงภาพในส่วนที่ต้องการให้มีเงาภายใน
- ดูตัวอย่าง. กล่องจะปรับปรุงเมื่อคุณลาก เพิ่มเลเยอร์ที่2ในตัวเลือกระดับสูงสำหรับความลึก
- คัดลอก CSS. กดปุ่ม คัดลอก CSS และปักหมุดกฎของรูปร่างเงากล่องเข้าไปในสไตล์ชีตของคุณ
เกี่ยวกับเครื่องมือนี้
ออกแบบเงากล่องโดยไม่ต้องเดาค่าพิกเซล ลากตัวเลื่อน offset- X, offset- Y, blur และ spread เลือกสีเงาและปรับความไม่โปร่งใสของมัน และดูการอัพเดทตัวอย่างของกล่องโดยทันที - จากนั้นคัดลอก CSS ของเงากล่องที่ถูกต้อง เปลี่ยนการเปิดปิดการวางภาพเพื่อใช้เงาภายใน ตัวเลือกระดับสูง จัดเรียงเลเยอร์เงาครั้งที่สอง ดังนั้นคุณสามารถสร้างเงาหลายชั้นที่ใช้กับการ์ดและปุ่มสมัยใหม่ได้ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
คนใช้มันทำอะไร
- เพิ่มเงาลงไปบนไพ่และตัวบ่งชี้
- สร้างเงาภายใน (inset) สำหรับช่องเข้าและช่องหลุม
- วางเลเยอร์สองเลเยอร์ไว้บนกันเพื่อสร้างเงาที่ดูเหมือนจริง
- ปรับแต่งการโอฟเซตและความมืดให้เข้ากับโมคคัพการออกแบบ
คำถามที่ถามบ่อย
ตัวเลือก Offset-X/Y จะย้ายเงาไปทางแนวนอนและแนวตั้ง ส่วนการคลุมเครือจะทำให้ขอบของเงาบางลง และจะทำให้เงาขยายตัวหรือลดขนาดก่อนที่จะใช้การคลุมเครือ ตัวอย่างสดจะแสดงการเปลี่ยนแปลงทุกอย่างในทันที
ตัวเลือก Insert ใช้วาดเงาภายในส่วนประกอบ แทนที่จะวาดเงาด้านหลังส่วนประกอบ ทำให้ดูเหมือนถูกกดเข้าไปในส่วนประกอบ - เหมาะสำหรับใช้กับการเข้าถึงและสลับการใช้งาน เปลี่ยนตัวเลือก Insert เพื่อสลับการใช้งาน
เลือกสี แล้วใช้ตัวเลื่อนความไม่โปร่งใส เครื่องมือจะแสดงค่า rgba () เพื่อให้เงาผสมกันได้ตามธรรมชาติ
ใช่ เปิดตัวเลือกระดับสูง เพื่อเปิดใช้งานเลเยอร์เงาเลเยอร์ที่2โดยใช้ค่าอฟฟิชชัน, ความคลุมเครือ, สี และส่วนใส่
ไม่ ตัวสร้างจะทำงานโดยสมบูรณ์ในเบราว์เซอร์ของคุณ ตัวเลื่อนจะคำนวณข้อความ CSS ภายในเครื่อง
ฟรีโดยสิ้นเชิง ไม่มีบัญชี และไม่มีขีดจำกัด เครื่องมือด้านคลาวด์ที่ไม่มีอะไรให้วัด
ใช่ มันทำงานในเบราว์เซอร์ของคุณ ดังนั้น CSS Box Shadow Generator ทำงานบนโทรศัพท์มือถือและแท็บเล็ต เช่นเดียวกับบนเดสก์ท็อป - ไม่มีแอพพลิเคชันที่จะติดตั้ง
โดยปกติแล้วใช้เวลาไม่กี่วินาทีสำหรับแฟ้มทั่วไป - เครื่องสร้างเงากล่อง CSS จะเริ่มทำงานเมื่อคุณให้ข้อมูลเข้าไป
การใช้งานแบบไม่เป็นทางการไม่มีขีดจำกัด ภายใต้การใช้งานที่ยุติธรรมที่เปิดเผย ทำให้มันเร็วขึ้นสำหรับทุกคน
เบราว์เซอร์ปัจจุบันทั้งหมด - Chrome, Safari, Firefox และ Edge เครื่องสร้างเงากล่อง CSS ไม่ต้องการติดตั้งอะไรนอกจากเบราว์เซอร์ที่คุณใช้อยู่แล้ว