เลเยอร์เงาหลายชั้นได้ไหม?

ได้เลย — เพิ่มเงาได้มากเท่าที่ต้องการ แต่ละเงาจะมีระยะห่าง, เบลอ, สเปรด และสีเป็นของตัวเอง

รองรับเงาแบบ inset หรือไม่?

ได้เลย — เปลี่ยนเป็น 'inset' เพื่อให้เงาปรากฏภายในองค์ประกอบแทนที่จะเป็นด้านนอก

มี — สำหรับรูปแบบเงาเดี่ยวทั่วไป การซ้อนเงาหลายชั้นต้องใช้ CSS แบบกำหนดเอง

ฟรีทั้งหมด ไม่ต้องลงทะเบียน

สีและการออกแบบ

ตัวสร้าง CSS box-shadow ฟรี ออกแบบเงาด้วยแถบเลื่อนสำหรับ offset, blur, spread, color และ opacity ใส่เงาหลายชั้น คัดลอก CSS ได้ทันที

Runs in your browser

Offset X0px

Offset Y10px

Blur30px

Spread-10px

Opacity40%

Color

box-shadow: 0px 10px 30px -10px rgba(59, 130, 246, 0.40);

หมายเหตุจากบรรณาธิการ

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

›Can I layer multiple shadows?

Yes — add as many shadows as you want, each with its own offset, blur, spread and color.

›Does it support inset shadows?

Yes — toggle 'inset' to make a shadow appear inside the element instead of outside.

›Does it output Tailwind?

Yes — for common single-shadow patterns. Multi-shadow stacks need custom CSS.

›Is the generator free?

Yes — fully free, no signup.

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