CSS盒子阴影生成器

通过多层、颜色、模糊、扩展和内嵌选项可视化生成CSS box-shadow属性。即时复制可直接使用的CSS代码。

5px
5px
15px
0px
25%
#ffffff
#ffffff
8px
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
所有阴影生成都在浏览器中进行，不会向任何服务器发送数据。

How to Use This Tool

  1. 1

    Adjust shadow properties

    Use the sliders to set offset X/Y, blur radius, spread radius, color, and opacity for each shadow layer.

  2. 2

    Add multiple layers

    Click "Add Layer" to stack multiple shadows. Switch between layers using the tabs.

  3. 3

    Try presets

    Use the preset buttons (Subtle, Medium, Large, Sharp, Inset) as starting points for common shadow styles.

  4. 4

    Copy the CSS

    Click "Copy" to copy the generated box-shadow CSS property to your clipboard.

Frequently Asked Questions

What is CSS box-shadow?
CSS box-shadow adds shadow effects around an element's frame. It accepts horizontal/vertical offsets, blur radius, spread radius, and color values.
Can I use multiple shadow layers?
Yes! CSS supports multiple comma-separated shadow values. This tool lets you add up to 5 layers for complex shadow effects.
What is an inset shadow?
An inset shadow appears inside the element instead of outside. It creates a pressed or embedded appearance, commonly used for input fields.
Is my data secure?
Yes. All shadow generation happens entirely in your browser using JavaScript. No data is sent to any server.