Handytool
สำหรับนักพัฒนาฟรีทำงานในเครื่อง

CSS box-shadow generator

ออกแบบ CSS box-shadow value ด้วย live preview — offset, blur, spread, opacity และ inset

ตัวอย่าง
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

ปรับ sliders เพื่อออกแบบเงา — คัดลอก CSS เมื่อดูเหมาะสม

เกี่ยวกับ CSS box-shadow generator

Box-shadow generator ของ Handytool ให้คุณ sliders สำหรับ offset, blur, spread, color และ opacity — และ live preview card ที่อัปเดตเมื่อคุณลาก Toggle inset shadow, dial color ผ่าน picker และ copy ผลลัพธ์ box-shadow CSS declaration ลงใน stylesheet ของคุณ Tool ทั้งหมดทำงานในเบราว์เซอร์ของคุณ; ไม่มีการอัปโหลด

คุณสมบัติของ CSS box-shadow generator

  • 01

    ทุก parameter เป็น slider

    Horizontal และ vertical offset, blur radius, spread radius และ opacity แต่ละอันมี slider ของตัวเอง บวก numeric input — fine-tune โดยลาก, แล้ว nudge โดย keyboard สำหรับ pixel precision

  • 02

    Inset shadow รองรับ

    Flip inset toggle เพื่อสลับจาก drop shadow ไปเป็น inner shadow — มีประโยชน์สำหรับ pressed button, sunken input และ neumorphic surface

  • 03

    Color + opacity, แยกกัน

    เลือก base color ใน any hex value แล้ว adjust opacity อิสระ Output ใช้ rgba() เพื่อให้ color และ alpha ยังอ่านได้ เมื่อคุณ copy CSS

คำถามที่พบบ่อยของ CSS box-shadow generator

Spread value ทำอะไร?
Positive spread enlarge shadow ทุก direction ก่อน blur ถูก apply; negative spread shrink มัน มีประโยชน์สำหรับ tight, defined glow เมื่อ paired ด้วย small blur
ฉันสามารถเพิ่ม shadow หลายอันได้หรือไม่?
Generator นี้ output single shadow declaration เพื่อ layer shadow, copy value แล้ว paste มันสองครั้งใน CSS แยกด้วย comma — box-shadow accepts comma-separated list
ทำไม inset shadow ของฉันจึงไม่เห็น?
Inset shadow draw ภายในของ element ดังนั้นพวกมันต้องมี background color หรือ padding เพื่อจะมอง พวกมันจะไม่แสดงใน transparent หรือ zero-sized element
Preview pixel-accurate หรือไม่?
ใช่ — preview ใช้ actual CSS box-shadow property ใน real element ดังนั้นสิ่งที่คุณเห็นคือสิ่งที่ stylesheet ของคุณจะ render

เครื่องมือที่เกี่ยวข้อง

สำหรับนักพัฒนา →

สำรวจเครื่องมืออื่น ๆ

เครื่องมือทั้งหมด →