CSS 그림자 효과 생성기

빛을 끌어 그림자를 놓고, 겹을 쌓아 다듬는 box-shadow 편집기

CSS 그림자 효과 생성기는 box-shadow 값을 눈으로 보면서 맞추는 도구입니다. 무대 위의 빛을 끌면 모든 레이어의 그림자가 빛의 반대쪽으로 함께 돌고, 그림자 손잡이를 끌면 고른 레이어의 위치만 옮겨집니다. 레이어는 12겹까지 쌓을 수 있으며 목록의 1번이 맨 위에 그려집니다. 안내선은 고른 레이어의 그림자 테두리와 흐림이 퍼지는 띠를 그리고, 노란 점선으로는 모든 그림자가 상자 밖으로 닿는 거리를 네 변의 숫자와 함께 보여 줍니다.

처음 화면은 그림자를 네 겹으로 나눠 오프셋과 흐림을 두 배씩 늘린 부드러운 그림자입니다. 예시 24개에서 출발점을 고른 뒤 바탕·모양·크기를 실제로 쓸 화면에 맞춰 바꾸고, 결과를 CSS로 복사하면 됩니다. 투명한 PNG나 SVG 아이콘처럼 모양을 따라가는 그림자가 필요하면 그리는 방식을 drop-shadow로 바꿉니다. 그러면 같은 모양으로 보이도록 흐림 값을 바꿔 적은 filter 코드를 받을 수 있습니다.

언제 쓰나

그림자는 화면에서 무엇이 위에 떠 있고 무엇이 눌려 있는지를 알려 주는 장치입니다. 같은 값이라도 바탕과 모양에 따라 전혀 다르게 보이기 때문에, 코드를 쓰기 전에 실제 쓰임에 가깝게 놓고 확인하는 편이 빠릅니다.

• 카드·모달·드롭다운을 떠 보이게 할 때: 한 겹짜리 진한 그림자보다 옅은 겹을 여러 개 쌓은 그림자가 덜 탁해 보입니다. 부드러운 4겹이나 넓은 6겹 예시에서 시작해 모든 레이어 '작게·크게'로 높이를 맞춥니다.
• 입력칸·눌린 버튼처럼 들어가 보이게 할 때: 안쪽 그림자(inset)를 씁니다. 입력칸 예시는 위쪽 안쪽 그림자와 1px 안쪽 선을 함께 둡니다.
• 초점 고리·선택 표시를 만들 때: 흐림 없이 확산만 준 그림자는 레이아웃을 밀지 않는 테두리처럼 보입니다. 다만 Windows 고대비 같은 강제 색 모드에서는 box-shadow가 꺼지므로, 초점 표시는 outline과 함께 둡니다.
• 투명한 아이콘·로고에 그림자를 줄 때: box-shadow는 상자 모양의 그림자를 만듭니다. 모양을 따라가야 하면 drop-shadow를 고릅니다.
• 어두운 바탕·색 바탕에서 확인할 때: 밝은 화면에서 맞춘 검은 그림자는 어두운 바탕에서 거의 사라집니다. 바탕을 바꿔 가며 그림자가 실제로 보이는지 확인합니다.

쓰는 법

1. 출발점을 고릅니다. 아래 예시 24개 가운데 하나를 누르면 레이어·바탕·모양이 함께 바뀝니다. 묶음(기본, 겹 그림자, 안쪽, 색·빛, 스타일)으로 좁혀 볼 수 있습니다.
2. 빛을 끕니다. 무대의 해 모양 손잡이를 원 위로 끌면 모든 레이어의 오프셋이 같은 각도만큼 돕니다. 키보드로는 화살표 키 1°, Shift와 함께 15°씩 돌아갑니다.
3. 레이어를 다듬습니다. 목록에서 레이어를 고르고 막대나 칸으로 가로·세로·흐림·확산·색·불투명도를 바꿉니다. 무대의 십자 손잡이를 끌면 고른 레이어의 가로·세로가 함께 바뀝니다. 한 겹짜리 그림자는 '4겹으로 나누기'로 부드러운 겹으로 바꿀 수 있습니다.
4. 쓸 화면에 맞춥니다. 모양(카드·버튼·원·입력칸·사각형·투명 아이콘)과 크기, 바탕과 요소 색을 실제 화면과 비슷하게 맞춥니다. 노란 점선의 숫자로 그림자가 상자 밖으로 얼마나 퍼지는지 확인합니다.
5. 복사합니다. 'CSS 복사'로 코드를 가져가고, '링크 복사'로 지금 상태를 주소로 저장합니다. 주소에는 레이어, 바탕, 요소 색, 모양, 크기, 그리는 방식이 담기며, 화면을 처음 열었을 때는 주소를 바꾸지 않습니다.

값 다섯 개가 하는 일

한 겹의 그림자는 [inset] 가로 세로 흐림 확산 색으로 적습니다. 길이는 두 개에서 네 개까지 쓸 수 있고, 빠진 길이는 0으로 읽습니다. 그래서 이 도구는 흐림과 확산이 0이면 그 값을 줄여 6px 6px #0F172A처럼 적습니다.

• 가로·세로 오프셋: 양수는 오른쪽·아래로, 음수는 왼쪽·위로 그림자를 옮깁니다. 빛이 왼쪽 위에서 오면 그림자는 오른쪽 아래로 갑니다.
• 흐림: 0이면 경계가 칼같이 선명하고, 값이 클수록 가장자리가 넓게 번집니다. 음수는 쓸 수 없습니다.
• 확산: 양수는 그림자를 사방으로 키우고, 음수는 줄입니다. 안쪽 그림자에서는 그림자가 늘어나는 쪽이 테두리 안쪽이라, 양수일수록 그림자 영역이 넓어집니다.
• 색: 불투명도가 100%이면 HEX로, 그보다 낮으면 rgba()로 적습니다. 색을 빼면 글자색(currentColor)을 쓰기 때문에, 이 도구는 색을 늘 적습니다.
• inset: 상자가 바탕에서 들어 올려진 그림자 대신, 바탕이 상자 안쪽으로 그림자를 드리운 것처럼 그립니다.

흐림 값은 표준편차의 두 배입니다

CSS 명세는 흐림을 표준편차가 흐림 값의 절반인 가우스 흐림으로 근사하라고 정합니다. 각 화소는 그 결과와 5% 안에서 맞아야 합니다. 그래서 곧은 가장자리에서는 그림자 테두리를 가운데로 두고 안팎으로 흐림 값만큼, 모두 흐림의 두 배 폭에 걸쳐 진하기가 바뀝니다. 그림자 테두리 바로 위의 진하기는 원래의 50%이고, 흐림 값만큼 바깥에서는 2.3%까지 떨어집니다. 이 도구가 '바깥 여백'을 확산 + 흐림 ± 오프셋으로 계산하는 이유입니다.

Chromium 151에서 흐림 16px 그림자의 단면을 재 보면 위 표의 비율과 2.2%p 안에서 맞습니다. 흐림을 키우면 그림자의 가장 진한 부분은 테두리보다 흐림만큼 안쪽에서 시작하므로, 작은 요소에 큰 흐림을 주면 진한 부분이 거의 남지 않습니다.

확산과 둥근 모서리

확산은 그림자 테두리의 곧은 변을 그 값만큼 밀어냅니다. 너비와 높이는 0 밑으로 내려가지 않습니다. 모서리 반지름에도 확산 값을 더하지만, 반지름이 확산보다 작으면 둥근 모서리와 각진 모서리가 끊기지 않도록 더하는 양을 줄입니다. 반지름을 r, 넓히는 양을 e라고 하면 더하는 양은 e × (1 + (r ÷ e − 1)³)입니다. 안쪽 그림자에서 넓히는 양은 음수 확산의 크기입니다.

무대 안내선의 점선 테두리는 이 규칙대로 그립니다. 확산이 음수인 '아래만' 예시(0 10px 8px -8px)는 그림자를 상자보다 작게 줄인 뒤 아래로 내려서, 위와 양옆에는 그림자가 거의 보이지 않게 합니다.

여러 겹: 순서와 부드러운 그림자

그림자는 쉼표로 이어 여러 개를 쓸 수 있습니다. 목록의 첫 그림자가 맨 위에 그려지고 나머지는 차례로 그 뒤에 깔립니다. 같은 색을 쌓을 때는 순서가 거의 보이지 않지만, 무지개 고리처럼 색이 다른 확산 고리를 겹칠 때는 작은 고리가 앞에 와야 모든 색이 보입니다.

Ahlin(2019)은 오프셋과 흐림을 1·2·4·8px처럼 두 배씩 늘린 옅은 그림자를 쌓으면 한 겹 그림자보다 가장자리를 자연스럽게 다룰 수 있다고 소개했습니다. 아래 표의 '겹친 곳 진하기'는 모든 겹이 겹치는 가운데 부분의 진하기를 1 − (1 − a₁)(1 − a₂)…로 계산한 값입니다.

'4겹으로 나누기'는 고른 레이어의 오프셋·흐림·확산을 1/8·1/4·1/2·1로 나눈 네 겹을 만듭니다. 겹마다 불투명도는 겹친 곳 진하기가 원래와 같도록 1 − (1 − a)^(1/4)로 정합니다. 예를 들어 0 8px 8px 불투명도 48%를 나누면 0 1px 1px·0 2px 2px·0 4px 4px·0 8px 8px가 각각 15%로 바뀌어 부드러운 4겹과 같아집니다. 겹이 늘어난 뒤에는 모든 레이어 '작게·크게'(×0.8·×1.25)와 '옅게·진하게'로 전체를 한 번에 조절합니다.

안쪽 그림자(inset)

안쪽 그림자는 패딩 상자의 바깥이 모두 불투명하다고 보고 그 그림자를 상자 안에 그립니다. 그림자는 패딩 상자 밖으로 나가지 않으며, 요소의 배경 바로 위, 테두리 아래에 그려집니다. 그래서 테두리가 있는 요소에서는 테두리 안쪽부터 그림자가 시작합니다.

• 입력칸·눌린 버튼: 위쪽에 옅은 안쪽 그림자(inset 0 2px 4px)를 두면 칸이 바탕보다 낮아 보입니다.
• 안쪽 선: inset 0 0 0 2px는 크기를 바꾸지 않는 테두리처럼 쓸 수 있어, 선택된 카드를 표시할 때 레이아웃이 흔들리지 않습니다.
• 오목한 면: 바탕과 같은 색의 요소에 어두운 안쪽 그림자와 밝은 안쪽 그림자를 반대 방향으로 두면 파인 면처럼 보입니다.

예를 들어 안쪽 그림자를 켜고 가로 12px, 세로 8px, 흐림 18px, 확산 −2px, 색 #336699, 불투명도 35%를 넣으면 inset 12px 8px 18px -2px rgba(51, 102, 153, 0.35)가 됩니다. 안쪽 그림자는 상자 밖으로 퍼지지 않으므로 바깥 여백에는 들어가지 않습니다.

box-shadow와 filter: drop-shadow()의 차이

box-shadow는 요소의 테두리 상자 모양으로 그림자를 만들고, drop-shadow()는 요소를 그린 결과의 투명도 모양을 따라 그림자를 만듭니다. 투명한 아이콘 모양으로 바꿔 두 방식을 오가 보면 차이가 바로 보입니다.

Filter Effects 명세는 drop-shadow()의 세 번째 값을 흐림 반지름이 아닌 표준편차로 정합니다. Chromium 151에서 drop-shadow(… 10px)와 box-shadow … 20px의 단면이 같게 그려지는 것을 확인했고, 이 도구도 drop-shadow로 바꿀 때 흐림 값을 절반으로 적습니다. 확산이 있는 레이어는 확산 없이, 안쪽 그림자는 빼고 적으며 코드 아래에 그 사실을 알립니다. drop-shadow를 여러 개 이으면 뒤의 그림자가 앞 그림자까지 다시 그림자로 만들기 때문에, 같은 값의 box-shadow 여러 겹보다 진하고 넓습니다.

그림자는 자리를 차지하지 않습니다

그림자는 레이아웃에 영향을 주지 않고, 다른 상자나 글자와 겹칠 수 있습니다. 스크롤을 만들지도 않으므로 그림자 때문에 페이지가 넓어지지는 않습니다. 대신 부모에 overflow: hidden이 있거나 카드가 스크롤 상자의 가장자리에 붙어 있으면 그림자가 잘립니다.

잘리지 않게 하려면 바깥 그림자마다 확산 + 흐림에서 그 방향의 오프셋을 빼거나 더한 거리만큼 여백을 둡니다. 소프트 예시(0 4px 12px)는 위 8 · 오른쪽 12 · 아래 16 · 왼쪽 12px입니다. 무대의 노란 점선과 CSS 아래 문장이 지금 그림자의 이 값을 보여 줍니다.

어두운 바탕과 색 바탕

그림자는 바탕을 어둡게 만들어 보이는 효과라서, 바탕이 이미 어두우면 거의 보이지 않습니다. 아래 표는 검정 20% 그림자가 덮인 곳의 색과, 그 색과 바탕 사이의 명도 대비를 계산한 값입니다.

같은 그림자가 흰 바탕에서는 1.61:1로 보이지만 #0F172A 바탕에서는 1.05:1로 거의 사라집니다. 어두운 화면에서는 그림자를 진하게 하기보다 요소 면을 바탕보다 밝게 두거나, 위쪽에 밝은 안쪽 선을 더해 높이를 나타내는 방법이 잘 보입니다. 색 바탕 위에서는 회색 그림자가 탁해 보일 수 있으므로, '색 그림자' 예시처럼 그 색 계열의 그림자를 고려합니다.

그림자를 움직일 때

그림자는 계산된 값끼리 섞여 움직입니다. 두 목록의 길이가 다르면 짧은 쪽 끝에 투명한 0 0 0 0 그림자를 붙여 맞추지만, 같은 자리의 그림자끼리 inset 여부가 다르면 섞을 수 없어 값이 한 번에 바뀝니다. 마우스를 올렸을 때 카드가 떠오르게 하려면 바뀌기 전후의 그림자를 같은 겹 수, 같은 inset 순서로 두는 편이 안전합니다. 이 도구의 무대도 예시를 바꿀 때 이 규칙을 따릅니다. 겹 수가 달라도 부드럽게 바뀌지만, 같은 자리 그림자의 inset 여부가 다르면 바로 바뀝니다. 기기에서 동작 줄이기를 켜 두면 무대의 전환 효과를 끕니다.

브라우저 지원

숫자는 MDN 브라우저 호환성 자료에서 그 기능이 처음 들어간 버전입니다. Chrome 18과 Safari 6의 drop-shadow()는 -webkit-filter로 쓰던 시기의 값이며, 지금 쓰는 브라우저에는 접두사가 필요하지 않습니다.

자주 틀리는 경우

• 투명한 PNG에 box-shadow를 줌: 아이콘 모양이 아니라 네모난 그림자가 생깁니다. drop-shadow를 씁니다.
• drop-shadow에 box-shadow 흐림을 그대로 옮김: 세 번째 값의 뜻이 달라 두 배로 흐려집니다. 절반으로 적습니다.
• 부모의 overflow: hidden을 잊음: 카드 그림자가 잘립니다. 바깥 여백만큼 안쪽 여백을 둡니다.
• 검정 100%에 가까운 그림자: 화면이 무겁고 더러워 보입니다. 흐림을 키우고 불투명도를 낮추거나 겹을 나눕니다.
• 큰 양수 확산: 흐림보다 확산이 크면 그림자가 테두리처럼 보입니다. 확산은 작은 폭으로 조절합니다.
• 밝은 화면의 그림자를 어두운 화면에 그대로 씀: 대비가 1.05:1까지 떨어져 높이가 보이지 않습니다.
• 첫 그림자가 맨 아래라고 생각함: 목록의 첫 그림자가 맨 위입니다.

한계와 주의

• 명세는 흐림의 정확한 방법을 정하지 않고 가우스 흐림과 5% 안에서 맞으면 되도록 했습니다. 브라우저마다 가장자리 진하기가 조금씩 다를 수 있습니다.
• 미리보기는 지금 쓰는 브라우저가 실제 CSS로 그린 것입니다. 다른 브라우저의 모습은 그 브라우저에서 확인합니다.
• 길이는 px만, 소수는 한 자리까지 받습니다. 가로·세로는 ±300px, 흐림은 0~300px, 확산은 ±150px까지입니다. 막대는 그보다 좁은 범위만 움직이고, 칸에는 범위 전체를 넣을 수 있습니다.
• 빛을 돌리거나 '작게·크게'를 누르면 값을 0.1px 단위로 반올림합니다. 여러 번 되풀이하면 처음 값과 조금 달라질 수 있습니다.
• '겹친 곳 진하기'와 '4겹으로 나누기'의 불투명도는 같은 색을 겹친다고 보고 계산한 값입니다. 색이 다른 겹에는 맞지 않습니다.
• 바깥 여백은 흐림 반지름까지를 그림자가 닿는 곳으로 봅니다. 그 바깥에도 진하기 2.3% 이하의 아주 옅은 그림자가 남습니다. drop-shadow는 상자를 기준으로 계산하므로, 아이콘처럼 상자보다 작은 모양에서는 실제보다 넓게 나옵니다.
• MDN 호환성 자료에는 Chrome·Firefox·Safari에서 바깥 그림자가 스크롤바를 만든다는 주석이 남아 있습니다. Chromium 151에서는 생기지 않았지만, Firefox와 Safari는 재 보지 않았습니다.
• 강제 색 모드에서는 box-shadow가 none이 됩니다. 그림자로만 전달하는 정보(초점·선택·구분선)는 테두리나 outline으로도 나타냅니다.

기준일 CSS 명세·MDN 호환성 자료·Ahlin(2019)·Material Components 값은 2026-10-21에 원문으로 확인했습니다. 표의 진하기·모서리 반지름·대비는 이 도구의 계산 코어로 직접 구한 값이고, drop-shadow 흐림과 스크롤 여부는 Chromium 151에서 잰 결과입니다.

출처

• 01W3C: CSS Backgrounds and Borders Module Level 3 — box-shadowCandidate Recommendation Draft 2024-03-11. §6.1 값의 뜻·빠진 길이 0·색 기본값 currentColor, §6.1.1 그림자 모양·확산 모서리 식, §6.1.2 표준편차 = 흐림 ÷ 2·5% 허용, §6.1.3 첫 그림자가 맨 위·레이아웃과 스크롤에 영향 없음, 애니메이션은 계산된 값으로 섞음
• 02W3C: Filter Effects Module Level 1 — drop-shadow()Working Draft 2018-12-18. 세 번째 길이는 흐림 반지름이 아니라 표준편차, 확산과 여러 그림자는 받지 않음
• 03W3C: CSS Color Adjustment Module Level 1Candidate Recommendation Snapshot 2025-12-16. §3.1 강제 색 모드에서 box-shadow와 text-shadow는 none으로 계산
• 04MDN: box-shadow브라우저 호환성 표: 접두사 없이 Chrome 10·Edge 12·Firefox 4·Safari 5.1, 바깥 그림자 스크롤바 주석
• 05MDN: drop-shadow()브라우저 호환성 표: Chrome 18·Edge 12·Firefox 35·Safari 6
• 06MDN: filter브라우저 호환성 표: 접두사 없이 Chrome 53·Edge 12·Firefox 35·Safari 9.1, 그 전에는 -webkit-filter
• 07Tobias Ahlin: Smoother & sharper shadows with layered box-shadows2019-09-19. 오프셋·흐림을 두 배씩 늘린 4·5·6겹 예시와 불투명도(부드러운 4겹·선명한 5겹·넓은 6겹·꿈결 6겹 예시의 값)
• 08Material Components for the web: _elevation-theme.scsselevation 2의 umbra·penumbra·ambient 값과 불투명도 0.2·0.14·0.12(머티리얼 2단 예시)

자주 묻는 질문

함께 쓰는 도구