🃏카드 UI 그림자 깊이감 계산기

elevation 레벨 기반 그림자 수치 자동 계산

Elevation 레벨

box-shadow 값 —

카드 UI 그림자 elevation이란?

머티리얼 디자인 계열의 UI에서는 요소가 화면 위로 얼마나 떠 있는지를 elevation 값으로 표현하고, 그 값에 비례해 그림자의 오프셋·블러·투명도를 조정합니다. 이 계산기는 elevation 레벨을 선택하면 바로 쓸 수 있는 box-shadow 값을 계산해줍니다.

계산 방식

elevation이 높아질수록 그림자의 세로 오프셋과 블러 반경이 커지고, 동시에 그림자 색의 투명도(opacity)도 함께 진해집니다. 값이 너무 진해지면 부담스러워 보이므로 최대 투명도는 0.28로 제한해두었습니다.

실무 적용 팁

일반적인 카드에는 2~4 수준의 elevation이 자연스럽고, 모달이나 드롭다운처럼 화면 맨 위에 떠야 하는 요소는 8 이상을 사용하는 것이 좋습니다. 다크 모드처럼 배경이 어두운 화면에서는 계산된 opacity를 조금 낮춰 그림자가 과하게 도드라지지 않도록 조정하세요.

자주 묻는 질문

elevation 값은 어떻게 정해야 하나요?

화면에서 더 중요하거나 위에 떠 있어야 하는 요소일수록 높은 elevation을 사용합니다. 일반 카드는 2~4, 모달·팝오버처럼 떠 있는 요소는 8~16 이상을 권장합니다.

그림자 값을 그대로 CSS에 써도 되나요?

네, 계산된 box-shadow 값을 그대로 복사해 카드 컴포넌트에 적용할 수 있습니다. 다만 배경색이 어두운 경우 opacity를 조금 더 낮춰 조정하는 것이 자연스럽습니다.

카드 UI 그림자 elevation이란?

계산 방식

실무 적용 팁

자주 묻는 질문

같은 카테고리 도구