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.