디자인 아틀라스
EN
✦ 시각 효과

이너 섀도우

Inner shadow

box-shadow 앞에 inset 키워드 하나만 붙이면 그림자가 박스 밖이 아니라 안쪽으로 향해, 표면이 눌리거나 파인 것처럼 보입니다.

다른 이름: inset box-shadowPressed shadowRecessed shadow
···
html
<div class="wrap"><div class="well" id="well"></div><div class="label" id="l">box-shadow: none</div></div>
css
body{background:#e4e8ef}
.wrap{position:relative;display:grid;place-items:center;gap:16px}
.well{width:min(70vmin,260px);height:56px;border-radius:14px;background:#e7e9f0;transition:box-shadow .5s}
.label{font:600 12px/1.4 monospace;color:#5b5b68}
js
const well = document.getElementById('well');
const l = document.getElementById('l');
const STATES = [
  ['none', 'box-shadow: none'],
  ['0 3px 8px rgba(0,0,0,.18)', 'box-shadow: 0 3px 8px …'],
  ['inset 0 2px 4px rgba(0,0,0,.25)', 'box-shadow: inset 0 2px 4px …'],
  ['inset 0 6px 14px rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.5)', 'box-shadow: inset 0 6px 14px, inset 0 1px 2px'],
];
let i = 0;
function apply(){ const [css, label] = STATES[i]; well.style.boxShadow = css; l.textContent = label; i = (i + 1) % STATES.length; }
apply();
setInterval(apply, 1300);

일반 box-shadow 는 테두리 바깥으로 번져 요소가 표면 위로 살짝 떠 있는 것처럼 보이게 합니다. 앞에 inset 을 붙이면 정확히 반대로, 테두리 안쪽에서부터 그림자가 시작해 표면이 파여 있는 것처럼 보입니다.

방향의 의미도 뒤집힙니다 — 오프셋 값은 "빛이 어디서 오는지"가 아니라 "어느 안쪽 모서리에 그림자가 맺히는지"를 가리킵니다. y 를 양수로 주면(빛이 위에서 온다고 가정) 그림자는 안쪽 아래 모서리에 맺혀, 위에서 오는 빛이 오목한 바닥의 아래쪽을 어둡게 만드는 것처럼 보입니다.

여러 겹을 쌓을 수 있다는 점도 바깥 그림자와 같습니다 — 먼저 선언한 게 위로 그려지니, 촘촘하고 진한 레이어를 먼저 두고 넓고 옅은 레이어를 나중에 두면 또렷한 안쪽 테두리와 은은한 번짐을 동시에 얻습니다. border-radius 를 준 요소는 이너 섀도우도 그 모서리를 따라 둥글게 잘립니다.

언제 쓰나

눌린 버튼·토글, 검색창 같은 "안으로 파인 홈" 표현에 씁니다. 대비가 너무 낮으면 클릭 가능 여부가 안 읽히니(뉴모피즘의 문제) 값을 과하게 낮추지 마세요.