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.