CSS 그림자 효과 생성기

그림자 탭에서 값을 잡고, 미리보기 탭에서 대상 모양을 확인합니다

이 도구의 중심은 실시간 조정입니다. 그림자 자체의 CSS 값과 미리보기 박스의 모양 설정을 나눠서 보면 어떤 값이 실제 코드에 들어가는지 헷갈리지 않습니다.

1. 그림자 탭에서 레이어를 만듭니다. 수평 오프셋, 수직 오프셋, 흐림, 확산, 색상, 투명도, 내부 그림자를 한 레이어 단위로 조절합니다.
2. 필요하면 그림자 레이어를 추가합니다. 여러 레이어는 쉼표로 이어진 하나의 box-shadow 코드가 됩니다. 필요 없는 레이어는 삭제하고, 기본값으로 돌아갈 때는 초기화를 씁니다.
3. 미리보기 탭에서 대상 요소를 바꿉니다. 사각형, 둥근 사각형, 원형, 버튼, 카드 모양과 크기를 바꿔 실제 적용 대상에 가까운 화면으로 확인합니다.
4. 프리셋으로 출발점을 고른 뒤 코드를 복사합니다. 소프트, 레이어드, 네온 같은 프리셋은 시작값일 뿐입니다. 적용 전에는 CSS 코드 영역의 최종 값을 다시 확인합니다.

오프셋은 방향, 흐림과 확산은 그림자의 질감을 바꿉니다

box-shadow는 값의 이름이 비슷해 보이지만 역할이 다릅니다. 특히 흐림과 확산을 같은 값으로 생각하면 그림자가 너무 뭉개지거나, 반대로 딱딱한 테두리처럼 보일 수 있습니다.

출력 코드는 CSS box-shadow 문법을 한 줄로 정리한 값입니다

기본 출력 순서는 inset 여부, 수평 오프셋, 수직 오프셋, 흐림, 확산, 색상입니다. 여러 그림자를 쓰면 각 레이어가 쉼표로 이어지며, 브라우저는 이 목록을 하나의 box-shadow 값으로 읽습니다.

내부 그림자 예시는 한 줄의 inset 코드로 읽으면 됩니다

예를 들어 내부 그림자를 켜고 수평 12px, 수직 8px, 흐림 18px, 확산 -2px, 색상 #336699, 투명도 0.35를 넣으면 아래와 같은 값이 만들어집니다. 확산이 음수라 그림자가 너무 넓게 번지지 않고, inset 때문에 카드 안쪽으로 눌린 느낌이 납니다.

복사하기 전에 실제 배경과 대비를 한 번 더 봅니다

그림자는 화면을 선명하게 만들 수도 있지만, 너무 강하면 카드가 떠 보이고 글자 주변이 지저분해질 수 있습니다. 특히 다크 배경과 밝은 배경에서는 같은 값도 체감이 다릅니다.

• 흐림 값을 먼저 키우고 투명도는 낮게 둡니다. 진한 그림자보다 옅고 넓은 그림자가 더 자연스러운 경우가 많습니다.
• 확산은 작은 폭으로 조절합니다. 큰 양수 확산은 그림자를 테두리처럼 보이게 만들 수 있고, 큰 음수 확산은 그림자를 거의 숨길 수 있습니다.
• 여러 레이어는 적은 수로 시작합니다. 두세 개 이상을 겹치면 표현은 풍부해지지만, 코드가 길어지고 유지보수가 어려워질 수 있습니다.
• 다크 화면에서는 색을 그대로 쓰지 않습니다. 밝은 화면에서 자연스러운 검정 그림자도 어두운 배경에서는 얼룩처럼 보일 수 있으므로 실제 배경에서 확인합니다.

자주 묻는 질문