minstudio

CSS 박스 섀도우 레퍼런스

모던 웹 디자인에 쓰이는 세련된 box-shadow 코드 모음입니다.
눈으로 직접 그림자를 확인하고, 클릭하여 즉시 CSS 코드를 복사해 프로젝트에 사용하세요.

Soft & Smooth (부드러운 다중 그림자)

현대적인 웹에서 가장 널리 쓰이는 형태입니다. 얕고 짙은 그림자와 넓고 옅은 그림자를 겹쳐서 자연스러움을 극대화합니다.

Soft Sm
CSS
0 1px 2px 0 rgba(0, 0, 0, 0.05);
Soft Default
CSS
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
Soft Md
CSS
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
Soft Lg
CSS
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
Soft Xl
CSS
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Soft 2Xl
CSS
0 25px 50px -12px rgba(0, 0, 0, 0.25);

Apple Style (애플 스타일 딥 섀도우)

애플 웹사이트나 깔끔한 대시보드에서 자주 볼 수 있는 크고 넓게 퍼지는 투명한 그림자입니다.

Apple Floating
CSS
rgba(149, 157, 165, 0.2) 0px 8px 24px;
Apple Card
CSS
rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
Apple Sharp
CSS
rgba(0, 0, 0, 0.1) 0px 4px 12px;
Apple Deep
CSS
rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
Apple Diffuse
CSS
rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

Material Design (머티리얼)

구글 머티리얼 디자인 스펙에 맞춘 그림자입니다. 고도(Elevation)에 따라 깊이감이 달라집니다.

Elevation 1
CSS
0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
Elevation 2
CSS
0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
Elevation 3
CSS
0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
Elevation 4
CSS
0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
Elevation 5
CSS
0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

Neumorphism & Inner (네오모피즘 & 이너)

양각/음각 느낌을 주는 그림자 및 요소 내부로 파고드는 Inner Shadow입니다.

Inner Sm
CSS
inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
Inner Default
CSS
inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
Neumorph Convex (양각)
CSS
20px 20px 60px #bec3c9, -20px -20px 60px #ffffff;
Neumorph Concave (음각)
CSS
inset 20px 20px 60px #bec3c9, inset -20px -20px 60px #ffffff;

Colored (컬러 네온 섀도우)

빛나는 네온사인 같은 느낌을 주거나 메인 브랜드 컬러를 돋보이게 만들 때 사용합니다.

Blue Glow
CSS
0 10px 15px -3px rgba(59, 130, 246, 0.5), 0 4px 6px -4px rgba(59, 130, 246, 0.5);
Purple Glow
CSS
0 10px 15px -3px rgba(139, 92, 246, 0.5), 0 4px 6px -4px rgba(139, 92, 246, 0.5);
Pink Glow
CSS
0 10px 15px -3px rgba(236, 72, 153, 0.5), 0 4px 6px -4px rgba(236, 72, 153, 0.5);
Amber Glow
CSS
0 10px 15px -3px rgba(245, 158, 11, 0.5), 0 4px 6px -4px rgba(245, 158, 11, 0.5);
Emerald Glow
CSS
0 10px 15px -3px rgba(16, 185, 129, 0.5), 0 4px 6px -4px rgba(16, 185, 129, 0.5);
Soft & Smooth
Apple Style
Material Design
Neumorphism & Inner
Colored