DevToolBoxฟรี
บล็อก

CSS Box Shadow Generator

Design CSS box shadows visually with controls for offset, blur, spread, color, and inset. Copy CSS code instantly.

Presets
Shadow Layers
Horizontal Offset5px
Vertical Offset5px
Blur Radius15px
Spread Radius0px
Shadow Color
Opacity0.30
CSS Output
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);

What is CSS Box Shadow Generator?

The CSS box-shadow property adds shadow effects around elements. This visual generator lets you adjust offset, blur, spread, color, and inset with real-time preview.

𝕏 Twitterin LinkedIn

ให้คะแนนเครื่องมือนี้

4.8 / 5 · 203 คะแนน

เครื่องมือเพิ่มเติม

🌈CSS Gradient Generator🎨ตัวแปลงสี{ }ตัวย่อ / ทำให้สวย CSSTWCSS เป็น Tailwind

Recommended

Tailwind UIBeautiful UI components

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

  1. Adjust shadow offset
  2. Set blur and spread radius
  3. Choose shadow color
  4. Toggle inset for inner shadows
  5. Copy the CSS code

Use Cases

  • Card elevation effects
  • Button hover states
  • Modal shadows
  • Navigation bar shadows

FAQ

What is CSS box-shadow?
box-shadow adds shadow effects around an element's frame with offset, blur, spread, and color values.
Can I add multiple shadows?
Yes, CSS supports multiple box shadows. This tool lets you add up to 4 layers.
What is inset shadow?
An inset shadow appears inside the element, creating a pressed effect.