그림자 CSS 생성

Box Shadow Generator

여러 겹의 박스·텍스트 그림자를 미리보기와 함께 구성하고 CSS로 내보냅니다.

그림자를 여러 겹으로 구성해서 `box-shadow`, `text-shadow`, `drop-shadow()` 필터 중 하나로 내보냅니다. 알아 둘 것은 한 겹으로는 거의 맞지 않는다는 점입니다. 실제 그림자는 물체가 바닥에 닿는 좁고 진한 부분과 넓고 옅은 주변 부분이 합쳐진 것이고, 한 겹은 그중 하나만 될 수 있습니다. 그래서 한 겹이면 잔소리를 하고, 대상 속성이 표현하지 못하는 부분이 있으면 그것도 알려 줍니다.

🔒 브라우저 안에서만 처리shadowcssgenerator

카드

적용 대상

바탕

1번째 겹안쪽
가로 오프셋 0px세로 오프셋 1px흐림 3px확산 0px
2번째 겹안쪽
가로 오프셋 0px세로 오프셋 4px흐림 8px확산 -2px

프리셋

높이가 올라갈수록 오프셋은 거의 선형으로, 흐림은 그 제곱근으로 커집니다. 평면 위의 점광원이 실제로 만드는 모양입니다. 그림자가 커질수록 불투명도는 떨어집니다. 같은 양의 가림이 더 넓은 면적에 퍼지기 때문입니다. 이걸 반대로 하면 손으로 맞춘 그림자가 얼룩처럼 보입니다.

CSS

box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);

사용 방법

어디에 쓸 그림자인지 고릅니다
카드나 버튼이면 `box-shadow`, 글자면 `text-shadow`, 아이콘이나 배경을 딴 PNG처럼 실제로 투명한 부분이 있으면 `drop-shadow()`입니다. 미리보기도 따라 바뀌므로 항상 맞는 대상을 보게 됩니다.
프리셋에서 출발합니다
전부 두 겹짜리이고, 높이에 따라 오프셋은 선형으로, 흐림은 그 제곱근으로 커지며, 그림자가 넓어질수록 불투명도가 떨어집니다. 마지막 항목을 손으로 맞추다 반대로 하는 경우가 많고, 반대로 하면 그림자가 얼룩처럼 보입니다.
실제 바탕색으로 맞춥니다
흰 바탕에서 맞춘 그림자는 회색 페이지에서 너무 약하고 어두운 페이지에서 너무 셉니다. 바탕색 견본이 있는 이유는 컴포넌트가 실제로 놓일 배경 위에서 맞추라는 것입니다.
겹을 조정합니다
겹마다 오프셋·흐림·확산·색이 있고 안쪽 그림자 체크박스가 있습니다. 투명도가 필요하면 견본 대신 색을 직접 입력하세요. 그림자 색은 거의 항상 반투명인데 브라우저 기본 색 입력은 그걸 표현하지 못합니다.
선언을 복사합니다
대상에 따라 속성 이름도 바뀌므로, 복사한 것을 그대로 붙여넣으면 됩니다.

자주 묻는 질문

대상을 바꿨더니 안쪽 그림자와 확산이 사라졌습니다

버려졌고, 결과 위에 그렇게 적혀 있습니다. `text-shadow` 문법에는 안쪽 그림자도 확산도 없습니다. x, y, 흐림, 색이 전부입니다. `drop-shadow()`에도 둘 다 없습니다. 그래도 넣어서 내보내면 브라우저가 선언 전체를 버리기 때문에, 살아남지 못하는 부분만 떨어져 나가는 편이 낫습니다.

색 견본이 입력한 값과 다릅니다

견본은 `<input type="color">`이고 `#rrggbb`만 이해하며 투명도가 아예 없습니다. 입력한 값에서 최대한 근사한 16진수를 보여 줄 뿐이고, 실제 값은 텍스트 칸 쪽입니다. 투명도가 들어간 값은 텍스트를 고치세요.

`drop-shadow()`는 그냥 느린 `box-shadow`인가요?

아닙니다. 답하는 질문이 다릅니다. `box-shadow`는 테두리 상자를 따라가서 투명한 PNG에는 사각형 그림자가 붙습니다. `drop-shadow()`는 알파 채널을 따라가서 실제 모양대로 그립니다. 합성 패스를 한 번 더 쓰고 안쪽 그림자와 확산이 안 되므로, 모양이 중요할 때만 쓰고 나머지는 `box-shadow`를 쓰세요.