박스 섀도우 생성기

CSS 박스 섀도우(box-shadow) 값을 생성하고 미리보기합니다. 다양한 그림자 효과를 커스터마이징할 수 있습니다. 100% 무료.

Presets
Opacity 15%
Preview
Box Shadow Preview
CSS Code
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);

박스 섀도우 생성기 소개

CSS 박스 섀도우 값을 생성하고 미리보기 할 수 있는 도구입니다.

기능

Frequently Asked Questions

What is a CSS box shadow?

A CSS box shadow is a visual effect that adds a shadow around the frame of an HTML element. It is defined by the box-shadow property and consists of horizontal offset, vertical offset, blur radius, spread radius, and color. Shadows can be used to create depth, elevation, and visual hierarchy in web designs.

What does the spread radius do?

The spread radius (also called expansion) controls the size of the shadow. A positive value expands the shadow, making it larger than the element itself. A negative value shrinks the shadow. It is the key parameter for creating hard, well-defined shadows versus soft, diffused ones.

What is an inset shadow?

An inset shadow appears inside the element

Will the generated CSS work in all browsers?

Yes. The generated box-shadow syntax follows the CSS standard and works in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed for current browser versions.