ประเด็นสำคัญ
- 01พารามิเตอร์ box-shadow ทุกตัวมี slider ตัวของมัน บวก numeric input สำหรับ pixel-precision tuning
- 02สลับ Inset สลับระหว่างเงา drop และเงา inner สำหรับผลกระทบ pressed หรือ neumorphic
- 03Color และ opacity ควบคุมแยกกัน outputting rgba() สำหรับ CSS อ่านได้
- 04การแสดงตัวอย่าง ใช้ CSS property จริงบน element จริง — สิ่งที่คุณเห็นคือสิ่งที่ไฟล์ style ของคุณ render อย่างแม่นยำ
เหตุใดต้องใช้ Visual Box-Shadow Generator
CSS box-shadow ใช้ค่าได้ถึง 6 ค่า — horizontal offset vertical offset blur radius spread radius color และเขต optional inset keyword พิมพ์จากหน่วยความจำสำหรับเงา simple ทำได้ แต่สำหรับสิ่งใดๆ ที่ nuanced มากขึ้น — glow tight deep drop shadow soft elevation layer — คุณ guessing และ reloading จนกว่าสิ่งใดๆ จะมีลักษณะ right
ตัวกำเนิด visual ทำให้ loop iteration นั้นยุบ ย้าย slider ดูการเปลี่ยนแปลง instantaneously และคัดลอกเฉพาะเมื่อคุณพอใจ เครื่องกำเนิด box-shadow ของ Handytool ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ดังนั้น preview นั้น CSS property จริงนำใช้กับ element จริง — ไม่มีความแตกต่าง rendering ระหว่างเครื่องมือและหน้าจริงของคุณ
วิธีการออกแบบ Box Shadow
- 01
ปรับ horizontal และ vertical offsets
ค่า positive ย้ายเงา right และ down ค่า negative ย้ายมัน left และ up เงา centered (0, 0) สร้างเอฟเฟกต์ glow
- 02
ตั้งค่า blur radius
ค่า blur ที่สูงขึ้น สร้าง softer, more diffuse shadows zero blur สร้าง hard, solid shadow outline
- 03
ปรับ spread radius
Spread positive ขยาย shadow ก่อน blurring Spread negative shrinks มัน ซึ่ง useful สำหรับ tight under-element shadows
- 04
เลือก color และ opacity
ใช้ color picker เพื่อเลือก shadow hue จากนั้น dial opacity ลง สำหรับ subtlety เอาท์พุต ใช้ rgba() เพื่อเก็บค่า readable
- 05
สลับ inset ถ้าจำเป็น
Inset สลับจาก drop shadow ไป inner shadow — useful สำหรับ pressed buttons sunken inputs และ neumorphic surfaces
- 06
คัดลอกการประกาศ CSS
คลิก Copy เพื่อดึง full box-shadow ค่า และวางลงใน style sheet ของคุณ
ไม่มี Upload ไม่มี Account
ตัวกำเนิด เป็น client-side ทั้งหมด ตัวเลือก color ค่า numeric และ preview states อยู่ในเบราว์เซอร์ของคุณ — ไม่มีสิ่งใด ส่งไปยังเซิร์ฟเวอร์ ไม่มีบัญชีสร้าง และไม่มี usage limit
เพราะว่า preview element ใช้ CSS box-shadow property จริง เอาท์พุต accurate โดยนิยาม — ไม่มี canvas rendering หรือ screenshot approximation เกี่ยวข้อง ค่า pixel ที่คุณคัดลอก คือค่า pixel เบราว์เซอร์ใช้
Box-Shadow Generator คำถามที่พบบ่อย
spread value ทำอะไร
Spread positive ขยาย shadow ใน all directions ก่อน blur ถูกนำใช้; spread negative shrinks มัน useful สำหรับ tight defined glows เมื่อคู่กับ low blur
ฉันสามารถเพิ่ม multiple box shadows
ตัวกำเนิด นี้ outputs เงา single ไป time ลาย พวกเขา คัดลอก value และ separate multiple shadows ด้วย commas ใน CSS — box-shadow ยอมรับ comma-separated list
เหตุใด inset shadow ของฉัน invisible
Inset shadows วาด inside element ดังนั้นพวกเขา ต้อง background color หรือ visible padding แสดง พวกเขาจะไม่ปรากฏบน transparent หรือ zero-sized elements
preview pixel-accurate
ใช่ — preview ใช้ CSS box-shadow property จริงบน real DOM element ดังนั้น สิ่งที่คุณเห็น เป็นตรงตามที่ ไฟล์ style ของคุณจะสร้าง
neur omorphic shadow คืออะไร
Neumorphism ใช้สอง shadows — one light และ one dark — offset ใน opposite directions เพื่อให้ element ปรากฎ raised หรือ pressed จาก flat surface ทั้ง shadows มักจะ inset สำหรับ pressed variant