🔲 เครื่องมือสร้างเงา CSS Box-Shadow
ได้รับโค้ด CSS Box-Shadow ของคุณภายในไม่กี่วินาที — ไม่ต้องติดตั้ง ไม่ต้องสร้างบัญชี ไม่ต้องการอินเทอร์เน็ต ลากแถบเลื่อนเพื่อกำหนดค่าความถี่ ความเบลอ ความกว้าง สี และความโปร่งใสสำหรับแต่ละชั้นเงา ดูภาพตัวอย่างอัปเดตทันที จากนั้นคัดลอก CSS ที่พร้อมวางได้ทันที
ออกแบบมาเพื่อความเป็นส่วนตัว. เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ — ข้อมูลที่คุณป้อนไม่ได้ถูกอัปโหลดหรือเก็บไว้ และยังสามารถใช้งานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
เกี่ยวกับ
เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ JavaScript ธรรมดา — ออกแบบของคุณจะไม่เคยออกจากอุปกรณ์ของคุณ คุณสามารถสร้างชั้นเงาหลายชั้นเพื่อสร้างผลลัพธ์ความลึก เนื้อสัมผัสแบบ Neumorphism ผลลัพธ์แสงเรือง หรือการยกส่วนของบัตรเล็กน้อย แต่ละชั้นรองรับเงาแบบ Inset สำหรับผลลัพธ์แสงภายในหรือดูเหมือนปุ่มถูกกด ผลลัพธ์ที่ได้คือ CSS มาตรฐานที่คุณสามารถวางได้โดยตรงในไฟล์สไตล์ชีตใด ๆ โครงสร้างเฟรมเวิร์ก หรือโทคเอนการออกแบบ
วิธีใช้งาน
- คลิกที่ '+ Add Shadow' เพื่อสร้างชั้นเงาแรกของคุณ
- ใช้แถบเลื่อน Offset X, Offset Y, Blur, Spread และ Opacity เพื่อปรับแต่งแต่ละเงา คลิกปุ่ม 'Inset' เพื่อสร้างเอฟเฟกต์เงาภายใน
- คลิกที่สีในส่วนตัวเลือกสีเพื่อเลือกสีเงาใดก็ได้ ภาพลักษณ์แบบเรียลไทม์จะอัปเดตเมื่อคุณปรับแต่งทุกตัวควบคุม
- เพิ่มชั้นเพิ่มเติมเพื่อสร้างเอฟเฟกต์เงาหลายชั้นที่ซับซ้อน เช่น Neumorphism หรือแสงเรืองหลายชั้น
- คลิกที่ 'Copy CSS' เพื่อคัดลอกการประกาศ box-shadow ทั้งหมดและวางไว้ในไฟล์สไตล์ของคุณ
คำถามที่พบบ่อย
- เครื่องสร้างเงา box-shadow แบบ CSS นี้ใช้ฟรีไหม?
- ใช่ ฟรีทั้งหมด ไม่ต้องสร้างบัญชี ไม่มีช่วงทดลอง ไม่มีค่าซ่อนเร้น — เพียงเปิดหน้าและเริ่มสร้างเงาได้ทันที
- มันทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ตไหม?
- ใช่ เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยไม่มีการเรียกใช้เซิร์ฟเวอร์ เมื่อหน้าเว็บโหลดเสร็จแล้ว คุณสามารถตัดการเชื่อมต่ออินเทอร์เน็ตและมันจะยังคงทำงานได้อย่างสมบูรณ์แบบ
- ข้อมูลการออกแบบของฉันเป็นส่วนตัวไหม? มีอะไรถูกอัปโหลดขึ้นไปไหม?
- ไม่มีสิ่งใดถูกอัปโหลด ตั้งค่าเงาทั้งหมดจะถูกประมวลผลในเบราว์เซอร์ของคุณและบันทึกไว้เพียงใน localStorage ของเบราว์เซอร์เท่านั้น ไม่มีข้อมูลใดเลยที่จะออกจากอุปกรณ์ของคุณ
- ฉันสามารถสร้างเงาหลายชั้นในกฎ CSS หนึ่งเดียวได้ไหม?
- ใช่ คลิกที่ '+ Add Shadow' ได้เท่าที่คุณต้องการ เครื่องมือนี้จะรวมชั้นทั้งหมดเป็นค่า box-shadow ที่คั่นด้วยเครื่องหมายจุลภาคเดียว — ซึ่งเหมาะสำหรับ Neumorphism เอฟเฟกต์แสงเรือง หรือความลึกหลายทิศทาง
- ฉันจะสร้างเอฟเฟกต์เงาแบบ inset (ภายใน) ได้อย่างไร?
- ตรวจสอบกล่อง 'Inset' บนชั้นเงาใดก็ได้ เงาแบบ inset จะปรากฏภายในขอบขององค์ประกอบ ซึ่งมีประโยชน์สำหรับสถานะปุ่มที่ถูกกดหรือเอฟเฟกต์แสงภายใน ค่า CSS ที่สร้างขึ้นจะเพิ่มคำว่า 'inset' อัตโนมัติ
- เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?
- ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย